Heim >Web-Frontend >CSS-Tutorial >Detaillierte Erläuterung der CSS-Prioritätsberechnungsregeln
Detaillierte Erläuterung der CSS-Prioritätsberechnungsregeln
- 小云云Original
- 2017-12-19 09:38:092022Durchsuche
Vor kurzem habe ich die Regeln der CSS-Prioritätsberechnung gelernt, und es ist sehr wichtig, dass dieser Artikel die Regeln der CSS-Prioritätsberechnung vorstellt. Jetzt werde ich es mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.
Das Gewicht von CSS
1. So führen Sie CSS ein
1. Verwenden Sie im Knotenelement das Stilattribut
2 durch Link
3. Der Unterschied zwischen den drei Möglichkeiten,
über das Style-Tag
index.html-Datei
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="body.css">
<style type="text/css">
body {
background: red;
}
</style>
</head>
<body style="background: yellow;">
</body>
</html>
in die Seite einzuführen body.css-Datei
body {
background: green;
}
1. Die erste Methode hat eine höhere Priorität als die beiden letzteren und hat nichts mit der Reihenfolge der Einführung zu tun Der Textkörper oder das Ende des HTML-Tags werden alle in Gelb angezeigt
2. Die später eingeführten Stile überschreiben die zuvor eingeführten Stile den Text
Passen Sie die Reihenfolge der Link- und Style-Tags an. Der Link befindet sich vorne, das Style-Tag befindet sich hinten und die Seite wird rot angezeigt. Im Gegenteil, die Seite wird grün angezeigt
2. So erhalten Sie Knoten
1. id
2.class
3. Tag
4. Attribut
id
Der ID-Wert sollte auf einer Seite eindeutig sein , aber wenn mehrere identische IDs angezeigt werden, ist der Stil für alle ID-Knoten gültig: # gefolgt vom Knoten-ID-Wert
<body> <p id="id_p">第一个段落</p> <p id="id_p">第二个段落</p> </body>
#id_p {
color: red;
}
. Die Ergebnisse zeigen, dass der Text in beiden Absätze werden rot angezeigt
1. ID hat eine höhere Gewichtung als Klasse und Beschriftung. Wenn ID, Klasse und Beschriftung gleichzeitig auf einem Knoten formatiert werden, ist die Gewichtung der ID am höchsten
2. Wenn dieselbe ID über Link- und Style-Tags gestaltet wird, überschreibt der später eingeführte Stil den vorherigen Stil
Klasse
Mithilfe der Klasse können Stile für mehrere Knoten gleichzeitig festgelegt werden Klassen können überlagert werden. Anleitung. Gefolgt von einem einzelnen Klassennamen des Knotens
<body> <p class="class-p">第一个段落</p> <p class="class-p class-p-2">第二个段落</p> </body>
.class-p {
color: red;
}
.class-p-2 {
color: green;
}
Zu diesem Zeitpunkt erscheint der erste Absatz rot und der zweite Absatz grün
HTML anpassen
<body> <p class="class-p">第一个段落</p> <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序 --> </body>
Nach dem Anpassen der Positionen von Klasse-p und Klasse-p-2 bleibt der Seitenrenderingeffekt unverändert. Hinweis: Die Darstellung von Klassenstilen hat nichts mit der Reihenfolge der Klassenverwendung zu tun. Bei Klassenstilen mit derselben Gewichtung überschreiben die späteren Stileinstellungen den vorherigen Stil Einstellungen
Attribute
Sie können den Knoten auch über die Attribute auf dem Knoten formatieren lassen
<body> <p>第一个段落</p> <p title="第二个段落的title">第二个段落</p> </body>
[title] {
color: red;
}
Der zweite Absatz hat das Titelattribut. daher erscheint der zweite Absatz rot
Tag
Ermitteln Sie den Knoten anhand des Tag-Namens für die Stileinstellung
<body> <p>第一个段落</p> <p>第二个段落</p> </body>
p {
color: red;
}
Alle p-Tag-Knoten auf der Seite werden rot gerendert
Gemischt
Die oben genannten vier Methoden können gemischt und zum Stylen der entsprechenden Knoten verwendet werden. Zu den Kombinationsmethoden gehören hierarchische Verschachtelung, Stilüberlagerung, Knotenzuordnung usw. Am Ende wird dasjenige mit dem höchsten Gewicht das Endergebnis sein.
3. Stilgewichtung
Für die oben genannten vier Methoden ist die ID die höchste, die Klasse und das Attribut sind auf derselben Ebene (die nachfolgenden Stile überschreiben die vorherigen Stile). , und die Bezeichnung ist die niedrigste.
Wenn die vier Methoden gemischt werden, hat das gewichtete Ergebnis Vorrang. Sortieren Sie die IDs, Klassen, Attribute und Beschriftungsstile, die auf demselben Knoten vorhanden sind, und der zuerst eingestufte ist der endgültige Rendering-Effekt. Beispiel: Es gibt mehrere Arten von Stileinstellungen für Knoten p. Wählen Sie zunächst alle Stile mit IDs aus, einschließlich verschachtelter Stile. Sortieren Sie unter derselben ID einen anderen Stiltyp
<body class="body"> <p id="id_p">第一个段落</p> </body>
.body #id_p {
color: red;
}
#id_p {
color: green
}
Obwohl beide Stileinstellungen IDs haben und der grüne Effekt nach Rot eingestellt wird, kann dies jedoch durch Sortieren erfolgen Ich habe erhalten, dass unter demselben #id_p der vorherige.body existiert, sodass der endgültige Rendering-Effekt rot ist
Wenn Klassenstile, Attribute und Tags vorhanden sind, werden sie der Reihe nach sortiert, mit demselben Typ oder das gleiche Gewicht (Klasse und Attribute haben das gleiche Gewicht) Der Stil, der spätere Stil überschreibt den vorherigen Stil (basierend auf dem Typ, nicht auf dem Namen), und der zuerst eingestufte Stil ist der endgültige Rendering-Effekt.
Hinweis:
1. Verschachtelung, Überlagerung, >, + usw. haben keinen Einfluss auf den Endeffekt.
2. :nth-child, :last-child und andere Pseudoklassen sind höher als Klasse und Attribute
!important
! Wichtig ist der Stil. Ein Sonderfall in , sein Gewicht ist am höchsten, höher als ID, Klasse, Attribute, Tags und Stilattribute
<body class="body" style="background: red"></body>
.body {
background: green !important;
}
Der Seitenrenderingeffekt ist grün. Wenn die Stileinstellungen jedoch sortiert werden, ist derjenige mit der höheren Gewichtung eines anderen Typs der endgültige Effekt unter demselben Stiltyp. Beispielsweise verfügt unter derselben Klasse und !important
body.body {
background: blue !important;
}
.body {
background: green !important;
}
die erstere Stileinstellung über ein Body-Tag, der letztere jedoch nicht, sodass der endgültige Effekt blau ist
Erklärung
1. Vermeiden Sie die Verwendung von !important. Da !important das höchste Gewicht hat, werden für dieses Attribut des Knotens obligatorische Einstellungen vorgenommen. Seien Sie vorsichtig, wenn Sie es verwenden.
- Bei der Einführung von a Plug-In, legen Sie den Plug-In fest. Die Stile in werden stark überschrieben. Wenn Sie beim Einführen eines Plug-Ins den Stilcode im Plug-In nicht ändern möchten, können Sie mit !important das Überschreiben der Stilattribute im Plug-In erzwingen
- um das Überschreiben des Inline-Stils zu erzwingen. Für automatisch generierte oder dynamisch eingeführte HTML-Strukturen mit Inline-Stilen können Sie !important verwenden, um das Überschreiben der Inline-Stile zu erzwingen
- Workarounds
!important wird in vielen Fällen nicht empfohlen. Es gibt eine Regel in stylelint, die die Verwendung von !important verbietet. Es gibt eine Problemumgehung, die in den meisten Fällen einen ähnlichen Effekt wie !important erzielen kann.
html
span">Ein Stück Textcss .body .p .span { color: red; } .span.span.span.span. span {/**Self-Style-Overlay **/ color: green; }
Ohne Berücksichtigung des Inline-Stils und der ID kann das mehrfache Wiederholen und Überlagern des eigenen Stils die Klassengewichtung erhöhen und den Stil ändern.
Voraussetzungen für die Verwendung:
Es gibt kein Inline-Stilattribut
Es gibt keinen ID-Stil
3 des eigenen Stils übersteigt die Anzahl der Verschachtelungen
Vorteile: Keine Notwendigkeit, hierarchische DOM-Beziehungen zu berücksichtigen, wodurch die hierarchische Verschachtelung reduziert wird
Zusammenfassung
Basierend auf der obigen Beschreibung Die Berechnung des Gewichts folgt grundsätzlich den folgenden Regeln:
1. Vergleichen Sie nach Typ, der Typ mit dem höchsten Typgewicht wird angezeigt.
2. Gleicher Typ, Vergleich nach Menge und derjenige mit mehr wird angezeigt;
3. Gleiche Menge, vergleichen Sie in der Reihenfolge, letzteres zeigt den Verwendungsvorschlag von
Verschachtelung das Gewicht, sondern spiegelt auch einige strukturelle Beziehungen des DOM wider. Eine Verschachtelung ist jedoch nicht in jedem Fall erforderlich.
- Verschachtelung wird hauptsächlich für einzigartige Stileinstellungen innerhalb von Blöcken verwendet. Ein bestimmter Stil ist nur innerhalb eines bestimmten Blocks gültig und kann verschachtelt werden.
- Wenn mehrere Seiten gleichzeitig entwickelt werden, kann eine Verschachtelung verwendet werden, um ein Überschreiben der Stile nach dem Zusammenführen zu vermeiden.
- Je mehr Verschachtelung verwendet wird, desto besser. Je verschachtelter, desto größer das Gewicht, aber gleichzeitig auch der Leistungsverbrauch der Seite. Es wird empfohlen, Vererbung und Stilüberlagerung zu verwenden.
Verwandte Empfehlungen:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der CSS-Prioritätsberechnungsregeln. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!