Wenn es zwei oder mehr CSS-Regeln gibt, die auf dasselbe verweisen Element, der Selektor mit dem höchsten Spezifitätswert „gewinnt“ und sein Die Stildeklaration wird auf dieses HTML-Element angewendet.
Stellen Sie sich Spezifität als einen Wert/Rang vor, der bestimmt, welche Stildeklaration vorliegt wird letztendlich auf ein Element angewendet.
Schauen Sie sich die folgenden Beispiele an:
In diesem Beispiel haben wir das Element „p“ als Selektor verwendet und eine rote Farbe angegeben für dieses Element. Der Text wird rot sein:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Schauen Sie sich nun Beispiel 2 an:
In diesem Beispiel haben wir einen Klassenselektor (mit dem Namen „test“) hinzugefügt und ein Grün angegeben Farbe für diese Klasse. Der Text wird jetzt grün sein (obwohl wir angegeben haben). ein roter Farbe für den Elementselektor „p“). Dies liegt daran, dass der Klassenselektor angegeben ist Höhere Priorität:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Schauen Sie sich nun Beispiel 3 an:
In diesem Beispiel haben wir den ID-Selektor (mit dem Namen „demo“) hinzugefügt. Der Text wird nun sein blau, da der ID-Selektor eine höhere Priorität erhält:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Schauen Sie sich nun Beispiel 4 an:
In diesem Beispiel haben wir einen Inline-Stil für das Element „p“ hinzugefügt. Der Der Text wird jetzt rosa sein, da dem Inline-Stil die höchste Priorität eingeräumt wird:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
Jeder CSS-Selektor hat seinen Platz in der Spezifitätshierarchie.
Es gibt vier Kategorien, die den Spezifitätsgrad eines Selektors definieren:
1. Inline-Stile - Beispiel:
<h1 style="color: pink;">
2. IDs - Beispiel:
#navbar
3. Klassen, Pseudoklassen, Attributselektoren - Beispiel:
.test, :hover, [href]
4. Elemente und Pseudoelemente - Beispiel:
h1, ::before
Merken Sie sich, wie man die Spezifität berechnet!
Beginnen Sie bei 0, addieren Sie 100 für jeden ID-Wert und dann 10 für jeden Klassenwert (bzw Pseudoklassen- oder Attributselektor), addieren Sie 1 für jeden Elementselektor oder Pseudoelement.
Hinweis: Der Inline-Stil erhält einen Spezifitätswert von 1000 und ist es auch immer mit höchster Priorität!
Anmerkung 2: Es gibt einen Ausnahme von dieser Regel: wenn Sie den !important verwenden In der Regel werden sogar Inline-Stile überschrieben!
Die folgende Tabelle zeigt einige Beispiele zur Berechnung von Spezifitätswerten:
| Selector | Specificity Value | Calculation |
|---|---|---|
| p | 1 | 1 |
| p.test | 11 | 1 + 10 |
| p#demo | 101 | 1 + 100 |
| <p style="color: pink;"> | 1000 | 1000 |
| #demo | 100 | 100 |
| .test | 10 | 10 |
| p.test1.test2 | 21 | 1 + 10 + 10 |
| #navbar p#demo | 201 | 100 + 1 + 100 |
| * | 0 | 0 (the universal selector is ignored) |
Der Selektor mit dem höchsten Spezifitätswert gewinnt und wird wirksam!
Betrachten Sie diese drei Codefragmente:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>Die Spezifität von A beträgt 1 (ein Elementselektor).
Die Spezifität von B beträgt 101 (eine ID-Referenz + ein Elementselektor)
Die Spezifität von C ist 1000 (Inline-Stil)
Da die dritte Regel (C) den höchsten Spezifitätswert (1000) hat, ist dieser Stil Die Deklaration wird angewendet.
Gleiche Spezifität: Die neueste Regel gewinnt - Wenn dieselbe Regel zweimal in das externe Stylesheet geschrieben wird, dann die neueste Regel gewinnt:
h1 {background-color: yellow;}
h1 {background-color: red;}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
ID-Selektoren haben eine höhere Spezifität als Attributselektoren - Schauen Sie sich die folgenden drei Codezeilen an:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
Die erste Regel ist spezifischer als die beiden anderen und wird daher angewendet.
Kontextselektoren sind spezifischer als ein einzelnes Element Selektor - Das eingebettete Stylesheet liegt näher am zu formatierenden Element. Also im folgende Situation
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>die letztgenannte Regel wird angewendet.
Ein Klassenselektor schlägt eine beliebige Anzahl von Elementselektoren - ein Klassenselektor wie .intro schlägt h1, p, div usw.:
.intro {background-color: yellow;}
h1 {background-color:
red;}Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Der universelle Selektor (*) und die geerbten Werte haben eine Spezifität von 0 - Der universelle Selektor (*) und geerbte Werte werden ignoriert!