Stilpriorität in CSS verstehen: Erläuterung der CSS-Stilprioritätsreihenfolge

Dieser Artikel stellt Ihnen die CSS-Stilpriorität vor und vermittelt Ihnen ein detailliertes Verständnis der Reihenfolge der CSS-Stilpriorität.

Waren Sie schon einmal in einer Situation, in der Sie versucht haben, einen CSS-Stil auf ein Element anzuwenden, aber es hatte keine Wirkung? Die Seite scheint das von Ihnen definierte CSS zu ignorieren, aber Sie können möglicherweise nicht herausfinden, warum. Vielleicht wirst du das tun! wichtig oder fügen Sie als letzten Ausweg Inline-Stile hinzu. Aber tatsächlich ist das Problem, das Sie haben, wahrscheinlich eines mit CSS-Priorität. (Empfohlener Kurs: CSS-Video-Tutorial)

Ein besseres Verständnis, welche CSS-Stile zuerst verwendet werden sollen, kann das Schreiben von CSS-Code klarer und organisierter machen. Schauen wir uns also die Steuerung des gegebenen HTML an. Drei CSS-Regeln für Elemente:

CSS-Prioritätsberechnung

CSS-Vererbung

CSS-Kaskadierung

Das Erlernen dieser Regeln wird Ihre CSS-Entwicklung auf den neuesten Stand bringen nächste Ebene.

Prioritätsberechnung

Stellen Sie sich vor, Ihr HTML-Code enthält einen Absatz, auf den eine Art „Kreatur“ angewendet wird. Sie haben außerdem die folgenden beiden CSS-Regeln:

p { font-size ：12px }
p.bio { font-size ：14px }

Soll die Textgröße im Absatz 12 Pixel oder 14 Pixel betragen? In diesem Fall können Sie davon ausgehen, dass es 14 Pixel sein wird. Die zweite CSS-Zeile (p.bio) ist spezifischer als Ihr class="bio"-Absatz. Manchmal sind Prioritäten jedoch nicht leicht zu erkennen.

Betrachten Sie zum Beispiel das folgende HTML und CSS

<div id = “sidebar” >
<p class = “bio” >文字在这里</ p>
</ div>

div p.bio { font-size ：14px }
#sidebar p { font-size ：12px }

Auf den ersten Blick sieht die erste CSS-Zeile vielleicht spezifischer aus, aber tatsächlich stimmt die zweite Zeile oben eher mit der Schriftgröße überein des Absatzes. Warum ist das so?

Um diese Frage zu beantworten, müssen wir Prioritätsregeln berücksichtigen.

Die Spezifität wird berechnet, indem die verschiedenen Komponenten von CSS gezählt und in der Form (a, b, c, d) ausgedrückt werden. Anhand eines Beispiels wird dies deutlicher, aber zuerst die Komponenten.

Element, Pseudoelement: d = 1 - (0,0,0,1)

Klasse, Pseudoklasse, Attribut: c = 1 - (0,0,1, 0)

Id: b = 1 - (0,1,0,0)

Inline-Stil: a = 1 - (1,0,0,0)

Die ID ist spezifischer als die Klasse und nicht das Element.

Sie können die Priorität berechnen, indem Sie jeden der oben genannten Punkte berechnen und 1 zu a, b, c oder d addieren. Es ist auch wichtig zu beachten, dass 0,0,1,0 spezifischer ist als 0,0,0,15. Schauen wir uns einige Beispiele an, um die Berechnung klarer zu machen.

p: 1 Element – ​​(0,0,0,1)

div: 1 Element – ​​(0,0,0,1)

#sidebar :1 Element, 1 ID – (0,1,0,0)

div#sidebar: 1 Element, 1 ID – (0,1,0,1)

div#sidebar p: 2 Elemente, 1 ID – (0,1,0,2)

div#sidebar p.bio: 2 Elemente, 1 Klasse, 1 ID – (0,1,1 ,2)

Schauen wir uns das obige Beispiel noch einmal an

div p.bio { font-size ：14px }  - （0,0,1,2）
#sidebar p { font-size ：12px }  - （0,1,0,1）

Das zweite hat die höhere Priorität und hat daher Vorrang.

Ein letzter Punkt, bevor wir weitermachen. Wenn Sie es verwenden, ist Wichtigkeit wichtiger als Priorität! Wenn Sie das CSS-Attribut als wichtig markieren, überschreiben Sie die Prioritätsregeln usw.

div p.bio { font-size ：14px ！important }    
#sidebar p { font-size ：12px }

bedeutet, dass die erste CSS-Zeile oben Vorrang vor der zweiten Zeile hat und nicht vor der zweiten. ! Wichtig ist immer noch die Spezifität der Grundregeln, die Sie niemals benötigen sollten, wenn Sie verstehen, wie die Regeln funktionieren.

Vererbung

Die Idee hinter der Vererbung ist relativ einfach zu verstehen. Elemente erben Stile von ihrem übergeordneten Container. Wenn das Body-Tag auf die Verwendung von color:red eingestellt ist, ist der Text aller Elemente im Body ebenfalls rot, sofern nicht anders angegeben.

Allerdings werden nicht alle CSS-Eigenschaften vererbt. Beispielsweise sind Ränder und Innenabstand nicht vererbte Eigenschaften. Wenn Sie Ränder oder Abstände für ein Div festlegen, erben die Absätze innerhalb des Divs nicht die Ränder und Abstände, die Sie für das Div festgelegt haben. Der Absatz verwendet die standardmäßigen Browserränder und -abstände, bis Sie etwas anderes angeben.

Sie können jedoch explizit Eigenschaften festlegen, um Stile vom übergeordneten Container zu erben. Sie könnten beispielsweise

p { margin ：inherit ; 填充：继承 }

deklarieren und Ihr Absatz würde von seinem enthaltenden Element erben.

Kaskadierung

Auf der höchsten Ebene steuert die Kaskadierung alle CSS-Prioritäten und funktioniert wie folgt.

1. Finden Sie alle CSS-Deklarationen, die für verwandte Elemente und Attribute gelten.

2. Sortieren nach Herkunft und Gewicht. Origin bezieht sich auf die Quelle der Deklaration (Autorenstil, Benutzerstil, Browser-Standardwert) und Gewicht bezieht sich auf die Wichtigkeit der Deklaration. (Das Gewicht des Autors ist größer als das Gewicht des Benutzers ist größer als der Standardwert. !important ist wichtiger als die normale Deklaration)

3 Berechnen Sie die Priorität

4 Alle oben genannten Regeln sind gleich. Dann gewinnt die letzte Regel. In HTML eingebettetes CSS kommt immer nach dem externen Stylesheet, unabhängig von der Reihenfolge im HTML.

Nr. 3 oben ist wahrscheinlich das, worauf Sie am meisten achten müssen. Bei Nummer 2 müssen Sie sich nur darüber im Klaren sein, dass Ihre Stile die Art und Weise überschreiben, wie Benutzer ihre Browser einrichten, es sei denn, sie stellen die Regel auf „Wichtig“ ein.

Beachten Sie auch, dass Ihre Stile die Browser-Standardeinstellungen überschreiben. Diese Standardeinstellungen sind jedoch vorhanden und verursachen häufig browserübergreifende Probleme. Die Verwendung einer Reset-Datei wie CSS Reset von Eric Meyer oder YUI Reset CSS von Yahoo hilft dabei, Standardstile aus der Gleichung zu entfernen.

Zusammenfassung

Ich hoffe, dass das oben Gesagte dabei hilft, einige Ihrer CSS-Prioritätsprobleme zu klären. Wenn Ihre Stile in Konflikt geraten, liegt das Problem in den meisten Fällen an den Prioritäten. Manchmal haben Sie kein CSS deklariert, aber ein Element verhält sich auf eine Weise, von der Sie nicht erwarten, dass es CSS vom übergeordneten Container oder den Standardstilen des Browsers geerbt hat.

Eine allgemeine Faustregel bei der CSS-Deklaration besteht darin, das Attribut mit der niedrigsten Priorität für die Gestaltung eines Elements zu deklarieren. Verwenden Sie beispielsweise #sidebar anstelle von div#sidebar. Ich gebe zu, dass ich viel mehr gegen diese allgemeine Regel verstoße, als ich sollte, aber durch die Verwendung der minimal erforderlichen Priorität wird es für Sie einfacher, Stile durch die Deklaration spezifischerer Stile zu überschreiben.

Wenn Sie „Höchste Priorität“ verwenden, kann es sein, dass Sie später auf Probleme stoßen und unnötiges HTML hinzufügen müssen, um weitere Prioritäten hinzufügen zu können, oder dass Sie es nicht mehr verwenden! important oder deklarieren Sie den Stil inline. Beginnen Sie mit der niedrigsten Priorität und fügen Sie nur bei Bedarf weitere hinzu.

Das obige ist der detaillierte Inhalt vonStilpriorität in CSS verstehen: Erläuterung der CSS-Stilprioritätsreihenfolge. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!