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:
Zählen Sie die Anzahl der ID-Attribute im Selektor.
Zählt die Anzahl der CLASS-Attribute im Selektor.
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:
Fügen Sie für jeden ID-Selektor (#someid) 0,1,0,0 hinzu.
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.
Füge 0,0,0,1 zu jedem Element oder Pseudoelement (:firstchild) usw. hinzu.
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
|
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
|
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.
<!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!
