Teilen Sie eine detaillierte Analyse der CSS-Prioritäten

Bevor wir über die CSS-Priorität sprechen, müssen wir verstehen, was CSS ist und wofür es verwendet wird.

Lassen Sie uns zunächst eine kurze Erklärung von CSS geben: CSS ist die Abkürzung für Cascading Style Sheets.

Seine Spezifikationen stellen eine einzigartige Entwicklungsstufe in der Geschichte des Internets dar. Heutzutage dürfte es unter Freunden, die sich mit der Erstellung von Webseiten befassen, nur wenige geben, die noch nichts von CSS gehört haben, denn bevor wir über die CSS-Priorität sprechen, müssen wir verstehen, was CSS ist und wofür es verwendet wird.

Lassen Sie uns zunächst eine kurze Erklärung von CSS geben: CSS ist die Abkürzung für Cascading Style Sheets. Seine Spezifikationen stellen einen einzigartigen Entwicklungsstand in der Geschichte des Internets dar. Heutzutage sollten Freunde, die sich mit der Erstellung von Webseiten befassen, selten von CSS gehört haben, da wir es bei der Erstellung von Webseiten häufig verwenden müssen.

Zweitens: Wir können über CSS ein reichhaltiges und leicht zu änderndes Erscheinungsbild für das Dokument festlegen, um die Arbeitsbelastung der Webseitenersteller zu verringern und dadurch die Produktions- und Nachwartungskosten zu senken.

Tatsächlich ist es völlig überflüssig, darüber zu sprechen, was CSS ist und welche Rolle es spielt. Ich glaube, dass Freunde, die sich mit der Erstellung von Webseiten befassen, bereits mehr oder weniger damit in Berührung gekommen sind.

Zurück zum Geschäft, kommen wir zum heutigen Thema:

1 Was ist CSS-Priorität?

Die sogenannte CSS-Priorität bezieht sich auf die Reihenfolge, in der CSS-Stile im Browser analysiert werden.

2. CSS-Prioritätsregeln

Da Stile Priorität haben, wird es eine Regel zur Vereinbarung dieser Priorität geben, und diese „Regel“ ist dies muss gesagt werden.

Die Besonderheiten im Stylesheet beschreiben die relative Gewichtung verschiedener Regeln. Seine Grundregeln sind:

1. Zählen Sie die Anzahl der ID-Attribute im Selektor.

2. Zählt die Anzahl der CLASS-Attribute im Selektor.

3. Zählt die Anzahl der HTML-Tag-Namen im Selektor.

Schreiben Sie abschließend die drei Zahlen in der richtigen Reihenfolge, ohne Leerzeichen oder Kommas hinzuzufügen, um eine dreistellige Zahl zu erhalten (css2.1 wird durch 4 Ziffern dargestellt). (Beachten Sie, dass Sie die Zahl in eine größere Zahl mit drei Ziffern umwandeln müssen.) Anhand der endgültigen Liste der dem Selektor entsprechenden Zahlen lässt sich leicht feststellen, welche Merkmale der höheren Zahl diejenigen der niedrigeren Zahl überschreiben.

Zum Beispiel:

1. Fügen Sie für jeden ID-Selektor (#someid) 0,1,0,0 hinzu.

2. Fügen Sie zu jedem Klassenselektor (.someclass), jedem Attributselektor (gebildet wie [attr=value] usw.) und jeder Pseudoklasse (gebildet wie: Hover usw.) hinzu .) 0,0,1,0.

3. Füge 0,0,0,1 zu jedem Element oder Pseudoelement (:firstchild) usw. hinzu.

4. Andere Selektoren umfassen den globalen Selektor * plus 0,0,0,0. Dies ist gleichbedeutend damit, es nicht hinzuzufügen, aber es handelt sich auch um eine Besonderheit, die später erläutert wird.

3. Liste der nach Merkmalen klassifizierten Selektoren

Das Folgende ist eine Liste der nach Merkmalen klassifizierten Selektoren:

Selektor

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	2
.apple {color:red;}	10
p.bright {color:yellow;}	11
p.bright em.dark {color:brown;}	22
#id316 {color:yellow}	100

Charakteristischer Wert td>

h1 {color:blue;}

1

p em {color:purple;}

2

.apple {color:red;}

10

p.bright {color:gelb;

11

p.bright em. dunkel {color:braun;}

22

#id316 {color:gelb

100

Wenn man sich nur die obige Tabelle ansieht, scheint es schwer zu verstehen. Hier ist eine weitere Tabelle:

Selector

选择符	特性值
h1 {color:blue;}	1
p em {color:purple;}	1+1=2
.apple {color:red;}	10
p.bright {color:yellow;}	1+10=11
p.bright em.dark {color:brown;}	1+10+1+10=22
#id316 {color:yellow}	100

Features Value

h1 {color:blue;}

1

p em {color:purple;

1+1=2

.apple {color:red;}

10

p.bright {color:gelb;

1+10=11

p.bright em.dark {color:brown;}

1+10+1+10=22

#id316 {color :gelb}

100

Aus dem Obigen können Sie leicht erkennen, dass die Gewichtung des HTML-Tags 1, die Gewichtung der Klasse 10, die Gewichtung der ID 100 und die geerbte Gewichtung 0 beträgt (wird später besprochen).

Fügen Sie die Zahlenfolgen Stück für Stück gemäß diesen Regeln hinzu, um das endgültige Gewicht zu erhalten, und vergleichen Sie sie dann beim Vergleichen und Auswählen Stück für Stück von links nach rechts.

Das Prioritätsproblem ist tatsächlich ein Konfliktlösungsproblem. Wenn dasselbe Element (Inhalt) vom CSS-Selektor ausgewählt wird, müssen je nach Priorität unterschiedliche CSS-Regeln ausgewählt werden.

Apropos, wir müssen über die Vererbung von CSS sprechen.

4. Vererbung von CSS

4.1 Leistung der Vererbung

Vererbung ist CSS A-Hauptfach Das Besondere daran ist, dass es auf Vorfahren-Nachkommen-Beziehungen beruht. Vererbung ist ein Mechanismus, der es ermöglicht, Stile nicht nur auf ein bestimmtes Element, sondern auch auf seine Nachkommen anzuwenden. Beispielsweise wird ein durch BODY definierter Farbwert auch auf den Text des Absatzes angewendet.

Stildefinition:

body {color:#f00;}

Beispielcode:

Vererbungstest

Beispieleffekt:

Dieser Code Das Ergebnis der Anwendung lautet: „CSS-Vererbung testen“ ist rot und die Wörter „Vererbung“ sind aufgrund des -Tags fett gedruckt. Offensichtlich erbt dieser Text die durch den Body-Stil {color:#f00;} definierte Farbe. Aus diesem Grund ist Vererbung Teil von CSS.

Das Gewicht der CSS-Vererbung ist jedoch sehr gering, nämlich 0, was niedriger ist als das Gewicht gewöhnlicher Elemente.

Wir nehmen immer noch den obigen Beispielcode als Beispiel: Fügen Sie eine Zeile in der Stildefinition hinzu:

strong {color:#000;}

Beispieleffekt:

Es wurde festgestellt, dass das Hinzufügen eines Farbwerts zu die von geerbte Stilfarbe überschreiben kann. Daraus folgt, dass jede explizit deklarierte Regel ihren geerbten Stil überschreiben kann.

4.2 Einschränkungen der Vererbung

Vererbung ist ein wichtiger Teil von CSS. Wir müssen nicht einmal darüber nachdenken, warum es so sein kann, sondern auch über die CSS-Vererbung hat Einschränkungen.

Es gibt einige Eigenschaften, die nicht vererbt werden können, wie zum Beispiel: Rand, Rand, Innenabstand, Hintergrund usw.

Stildefinition:

p {border:1px solid #000;}

Beispielcode:

< ;p>Ich binborderIch kann nicht vererbt werden

Erwartete Wirkung:

Tatsächliche Wirkung :

Aus dem obigen Effekt können wir ersehen, dass der Rand nicht vererbt werden kann, und das Gleiche gilt für einige andere Attribute, die hier nicht aufgeführt sind eins.

5. Zusätzliche Hinweise

Die Stilpriorität innerhalb des Textes beträgt 1,0,0,0, ist also immer höher als die externe Definition. Hier beziehen sich In-Text-Stile auf Stile der Form

blah

, während sich externe Definitionen auf Regeln beziehen, die über -Tags definiert wurden.
Es gibt vor allem !wichtige Deklarationsregeln.
Wenn !important-Deklarationen in Konflikt stehen, wird die Priorität verglichen.
Wenn die Prioritäten gleich sind, werden sie in der Reihenfolge ermittelt, in der sie im Quellcode erscheinen, wobei die späteren Prioritäten Vorrang haben.
Der durch Vererbung erhaltene Stil verfügt über keine Spezifitätsberechnung, die niedriger ist als alle anderen Regeln (z. B. die durch den globalen Selektor * definierten Regeln).
Was externe Stile betrifft, die über @import geladen werden, da @import vor allen anderen Regeldefinitionen erscheinen muss (wenn nicht, sollte der Browser es ignorieren), sodass nach dem Last-Come-First-Served-Prinzip im Allgemeinen Prioritätskonflikte vorherrschen .
Es sollte auch erwähnt werden, dass der IE @import an der falschen Position erkennen kann, aber unabhängig davon, wo sich @import befindet, wird es als vor allen anderen Regeldefinitionen betrachtet, was zu Missverständnissen führen kann.

Die Prioritätsfrage scheint einfach, aber es steckt immer noch ein sehr komplexer Mechanismus dahinter, der in der praktischen Anwendung mehr Aufmerksamkeit erfordert.

6. Üben

Stellen Sie nach dem Lesen des obigen Textes einige sehr einfache Fragen. (Bitte lesen Sie nicht die in jeder Frage angegebene Linkadresse, bevor Sie sie selbst beantworten)

1. So verwenden Sie zwei Elemente mit demselben Stilnamen, um unterschiedliche Effekte zu erzielen:

Feld „Code ausführen“.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
.test { 
width:200px; 
border:1px solid #000; 
font:12px/200% "宋体"; 
color:#f00; 
background:#ddd; 
} 
p.test { 
color:#fff; 
background:#070; 
} 
</style> 
</head> 
<body> 
<div class="test">测试测试测试</div> 
<p class="test">测试测试测试</p> 
</body> 
</html>

Tipps: Sie können einen Teil des Codes vor der Ausführung ändern

Behobener Effekt:

固定代码：

2. 如何让

始终为黑色，而在不被

包含的情况为红色：

提示：您可以先修改部分代码再运行

传说中的测试

传说中的测试

 

固定效果：

固定代码：

讨论CSS优先级

讨论CSS优先级

3. 如何写一个外部样式使得

覆盖我

的颜色为红色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
h3 { 
color:#f00!important; 
} 
</style> 
</head> 
<body> 
<h3 style="color:#000;">覆盖我</h3> 
</body> 
</html>

提示：您可以先修改部分代码再运行

4. 如何让同时具有.a,.b样式的元素只表现.a的颜色样式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta http-equiv="Content-Language" content="gb2312" /> 
<title>test</title> 
<meta name="Author" content="doyoe(飘零雾雨), edzmaster@gmail.com" /> 
<style type="text/css"> 
.b { 
color:#000; 
} 
.a { 
color:#f00; 
} 
</style> 
</head> 
<body> 
<p class="a b">传说中滴测试</p> 
</body> 
</html>

提示：您可以先修改部分代码再运行

固定代码：

传说中滴测试

关于样式优先级，今天就先聊到这。

Das obige ist der detaillierte Inhalt vonTeilen Sie eine detaillierte Analyse der CSS-Prioritäten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!