Wenn es mehrere CSS-Zuweisungen für eine Element gibt folgt der Browser
einigen Regeln um festzustellen welche zutrifft und dargestellt wird.
Spezifität ist nichts anderes als ein Ranking, dieses bestimmt dann auch welcher Stil auf ein Element angewandt wird.
Die wichtigsten Selektoren:
Typselektor: Mit p{} wählen sie alle Absätze aus.
Klassenselektor: mit .ListClass{} wählen Sie alle Elemente mit .ListClass aus.
Attributselektor: Mit input[type="submit"] wählen Sie denn Absendebutton aus.
Gruppieren von Selektoren: Sie können Elemente gruppieren: h1, h2{};
Universal Selektor: mit * wählen Sie alle Elemente aus: *{};
Nachfahrens-Selektoren: main p{};
Kindelemente mit > (nur Kind, nicht Nachfahren): .liste > li{};
Pseudo-Klassen: li:hover {};
Pseudo-Elemente: p::before{};
Spezifitätshierarchie:
Die Hierachie besteht aus 4 Stellen: z.B. 0,0,1,0 :
Lassen Sie die Kommas weg und sie können ermittlen wie hoch die Zahl ist.
Je höher die Zahl ist desto höher ist auch die Spezifität:
Inline-Elemente haben die höchste Spezifität, es wird die erste Stelle um 1 erhöht: 1,0,0,0 :
Für id-Elemente wird die zweite Stelle um 1 erhöht: 0,1,0,0 :
Für class-Elemente, Attributselektor und pseudo-Klassen wird die dritte Stelle um 1 erhöht: 0,0,1,0, :
Für jedes Elemente und pseudo-Element wird die vierte Stelle um 1 erhöht: 0,0,0,1, :
Das eingebettete(internal)Stylesheet hat Vorrang vor einem externen Stylesheet.
Das div-Element div#a hat zwei Selektoren und somit die höhere Spezifität als #a mit nur einem Selektor.
Ausserdem hat ein id-Selektor die höhere Spezifität als ein Attribut-Selektor.
<!DOCTYPE html>
<html>
<head>
<style>
div#a {
background-color: dodgerblue;
}
#a {
background-color: orange;
}
div[id=a] {
background-color: grey;
}
</style>
</head>
<body>
<div id="a">Das div-Element div#a hat zwei Selektoren und somit die höhere Spezifität als #a mit nur einem Selektor.
Ausserdem hat ein id-Selektor die höhere Spezifität als ein Attribut-Selektor.
</div>
</body>
</html>
Ein Klassen-Selektor hat die höhere Spezifität als ein Element-Selektor.
<!DOCTYPE html>
<html>
<head>
<style>
.introduction {
background-color: orange;
}
h2 {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2 class="introduction">Ein Klassen-Selektor hat die höhere Spezifität als ein Element-Selektor.</h2>
</body>
</html>
Bei gleicher Spezifität wird die letzte Definition auf die Überschrift angewandt.
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
background-color: grey;
}
h2 {
background-color: dodgerblue;
}
</style>
</head>
<body>
<h2>Bei gleicher Spezifität wird die letzte Definition auf die Überschrift angewandt.</h2>
