Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Detaillierte Erläuterung der CSS-Prioritätsberechnungsregeln

小云云
Freigeben: 2017-12-19 09:38:09
Original
2003 Leute haben es durchsucht

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>
Nach dem Login kopieren

in die Seite einzuführen body.css-Datei

    body {
        background: green;
    }
Nach dem Login kopieren

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>
Nach dem Login kopieren
#id_p {
  color: red;
}
Nach dem Login kopieren

. 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>
Nach dem Login kopieren
.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}
Nach dem Login kopieren

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 Login kopieren

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>
Nach dem Login kopieren
[title] {
  color: red;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
p {
  color: red;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

.body #id_p {
  color: red;
}

#id_p {
  color: green
}
Nach dem Login kopieren

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>
Nach dem Login kopieren
.body {
  background: green !important;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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 Text

css .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.
  1. Wenn mehrere Seiten gleichzeitig entwickelt werden, kann eine Verschachtelung verwendet werden, um ein Überschreiben der Stile nach dem Zusammenführen zu vermeiden.
  2. 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:


Teilen Sie eine detaillierte Analyse der CSS-Priorität

CSS-Prioritätsproblem

Detaillierte Erklärung von CSS Priority_html/css_WEB-ITnose

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!