CSS -Selektoren: Spezifität

Die folgenden Auszüge stammen aus dem Buch "CSS Master" von Tiffany B. Brown. Dieses Buch ist in Geschäften auf der ganzen Welt erhältlich und Sie können die E-Book-Version hier auch kaufen.

CSS -Spezifität bestimmt, welche Stildeklarationen letztendlich für das Element gelten. Der Wildcard Selector (*) hat die niedrigste Spezifität und der ID -Selektor hat die höchste Spezifität. Der Nachkommenswählte (z. B. p img) und der Subelektor (z. B. Panel & GT; H2) sind spezifischer als der Typ -Selektor (z. B. P, IMG oder H1).

Auf den ersten Blick erscheint die Berechnung der genauen Spezifitätswerte schwierig. Wie in Selektorstufe 3 angegeben, benötigen Sie:

• Statistik Die Anzahl der ID -Selektoren im Selektor (= A)
• Statistik Die Anzahl der Klassenauswahl, Attribut-Selektoren und Pseudoklassen in Selektoren (= B)
• Statistik Die Anzahl der Typ-Selektoren und Pseudo-Elemente in Selektoren (= C)
• Ignorieren Sie den Wildcard -Selektor

Diese A-, B- und C -Werte werden dann kombiniert, um den endgültigen spezifischen Wert zu bilden. Zum Beispiel hat der ID -Selektor #Foo eine Spezifität von 1,0,0. Die Spezifität des Attributauswahl (z. B. [Type = E -Mail]) und der Klassenauswahl (z. B. .Chart) beträgt 0,1,0. Das Hinzufügen einer Pseudoklasse (z. B.: Erstkind, z. B. Chart: First-Kind) wird die Spezifität von 0,2,0 machen. Die Verwendung eines einfachen Typ- oder Element -Selektors (z. B. H1 oder P) macht jedoch nur die Spezifität von 0,0,1.

Hinweis: Berechnen Sie die Spezifität

Keegan Streets Spezifitätsrechner und Joshua Peeks CSS erläutern helfen, die Spezifität der Selektor zu lernen und zu berechnen.

komplexe Selektoren und kombinierte Selektoren erzeugen natürlich höhere Spezifitätswerte. Schauen wir uns ein Beispiel an. Betrachten Sie das folgende CSS:

<code>ul#story-list > .book-review {
    color: #0c0;
}

#story-list > .book-review {
    color: #f60;
}</code>

Diese beiden Regelsätze sind ähnlich, aber nicht gleich. Der erste Selektor, UL#Story-List & GT; Sein Spezifitätswert beträgt 1,1,1. Der zweite Selektor #Story-List & GT; Sein Spezifitätswert beträgt 1,1,0. Auch wenn unsere #Story-List & GT; .

Pseudoklassen wie: Link oder: Ungültig sind die gleiche Spezifitätsniveau wie Klassenauswahl. Die Spezifitätswerte von A: Link und A.external sind beide 0,1,1. In ähnlicher Weise sind Pseudo-Elemente wie :: vor und :: nach so spezifisch wie Typen oder Element-Selektoren. Wenn die Spezifität der beiden Selektoren gleich ist, wird die Kaskade wirksam. Hier ist ein Beispiel:

<code>a:link {
    color: #369;
}
a.external {
    color: #f60;
}</code>

Wenn wir dieses CSS anwenden, sind alle Links schieferblau, mit Ausnahme der Links, die die .externale Klasse anwenden. Diese Links werden in Orange geändert.

Bei der niedrigen Spezifität verhindern die Ausbreitung des Selektors, d. H. Die Tendenz der Selektorspezifität und -länge, um im Laufe der Zeit zu steigen. Dies geschieht normalerweise, wenn Sie Ihrem Team oder neuen Inhaltsformularen zu Ihrer Website neue Entwickler hinzufügen. Die Ausbreitung der Selektoren kann auch zu langfristigen Wartungsschwierigkeiten führen. Am Ende verwenden Sie entweder einen spezifischeren Selektor, um andere Regeln zu überschreiben, oder Sie müssen den Code neu umarbeiten. Der längere Selektor erhöht auch das Gewicht der CSS -Datei.

Wir diskutieren Strategien, um die Spezifität in Kapitel 2 niedrig zu halten.

Schlussfolgerung

Nach dem Lesen dieses Kapitels sollten Sie ein gutes Verständnis für den CSS -Selektor haben. Insbesondere sollten Sie wissen, wie man:

• CSS auf bestimmte Elemente, Pseudo-Elemente und Pseudoklassen unter Verwendung von Selektoren
anwenden
• Verstehen Sie den Unterschied zwischen Pseudoelementen und Pseudoklasse
• Verwenden Sie neuere Pseudoklassen, die in den Selektorebenen 3 und 4 Spezifikationen eingeführt werden
• Berechnungsspezifität

Im nächsten Kapitel werden wir einige der goldenen Regeln für das Schreiben von Wartungsbetrag, erweiterbarer CSS einführen.

häufig gestellte Fragen zu CSS -Selektoren und Spezifität (FAQ)

Welche Bedeutung hat die CSS -Spezifität in der Webentwicklung?

CSS -Spezifität ist ein Schlüsselkonzept in der Webentwicklung, da sie bestimmt, welche CSS -Regel der Browser angewendet wird. Wenn mehrere CSS -Regeln auf ein Element angewendet werden können, befolgt der Browser bestimmte Regeln, um zu entscheiden, welche Regeln verwendet werden sollen. Das Verständnis der CSS -Spezifität kann Entwicklern helfen, effizientere und effizientere CSS -Code zu schreiben, unnötige Überschreibungen zu vermeiden und CSS -Probleme effektiver zu beheben.

Wie berechnet man die CSS -Spezifität?

Die Berechnung der CSS -Spezifität basiert auf verschiedenen Arten von Selektoren, die in CSS -Regeln verwendet werden. Jeder Selektorstyp hat einen anderen Spezifitätswert. Inline-Stile haben die höchste Spezifität, gefolgt von ID-Selektoren, Klassenauswahl, Attributauswahl und Pseudoklassen sowie schließlich Typ-Selektoren und Pseudo-Elemente. Die Spezifität einer CSS-Regel ist die Summe ihrer selektorspezifischen Werte.

Können Sie das Konzept der CSS -Spezifität mit einem Beispiel erklären?

Betrachten wir ein Beispiel. Angenommen, wir haben eine CSS -Regel mit Klassenauswahl .class1 und eine andere Regel mit ID -Selektor #ID1. Wenn diese beiden Regeln auf dasselbe Element angewendet werden können, wird eine Regel mit einem ID -Selektor angewendet, da der ID -Selektor eine höhere Spezifität als der Klassenauswahl hat.

Was passiert, wenn zwei CSS -Regeln die gleiche Spezifität haben?

Wenn zwei CSS -Regeln die gleiche Spezifität haben, wird die letzte Regel, die im CSS -Code angezeigt wird, angewendet. Dies liegt daran, dass CSS die Strategie „Last Rule Win“ befolgt, wenn sie sich mit Regeln mit derselben Spezifität befassen.

Wie kann man die CSS -Spezifität abdecken?

Sie können die CSS -Spezifität überschreiben, indem Sie die Spezifität der CSS -Regeln erhöhen. Dies kann durch Hinzufügen spezifischerer Selektoren zu den Regeln erfolgen. Eine andere Möglichkeit, die CSS -Spezifität zu überschreiben, besteht darin, die wichtige Regel zu verwenden. Es ist jedoch wichtig, wenn möglich zu vermeiden, da Ihr CSS -Code schwieriger zu verwalten und zu debuggen wird.

Welche Rolle spielt die Vererbung in der CSS -Spezifität?

Vererbung ist ein Merkmal in CSS, bei dem bestimmte Arten von Attributen automatisch vom übergeordneten Element an sein untergeordnetes Element übergeben werden. Geerbte Stile haben jedoch die niedrigste Spezifität und können durch jeden direkten Stil, der auf das Element angewendet wird, leicht überschrieben werden.

Wie wirkt sich der Wildcard -Selektor auf die CSS -Spezifität aus?

Wildcard Selector (*) hat keinen Einfluss auf die CSS -Spezifität. Dies bedeutet, dass sein Spezifitätswert 0,0,0,0 beträgt. Daher überschreibt jeder andere in derselbe Regel verwendete Selektor den Wildcard -Selektor.

Was ist die Spezifität von Pseudoelementen in CSS?

Die Spezifität des Pseudo-Elements in CSS beträgt 0,0,0,1. Dies bedeutet, dass sie die gleiche Spezifität wie Type -Selektoren (z. B. Div, P usw.) haben und von Klassenauswahlern, ID -Selektoren und Inline -Stilen überschrieben werden.

: nicht () Wie wirkt sich die Pseudoklasse auf die CSS-Spezifität aus?

Die: nicht () Pseudo-Klasse in CSS erhöht die Selektorspezifität nicht. Stattdessen basiert die spezifische Berechnung auf den Parametern, die an die Funktion: nicht () übergeben wurden. Zum Beispiel in: nicht (.class1) ist die Spezifität die gleiche wie .class1.

Kann ich mehrere Selektoren in einer einzelnen CSS -Regel verwenden? Wie wirkt sich dies auf die Spezifität aus?

Ja, Sie können mehrere Selektoren in einer einzelnen CSS -Regel verwenden. Die Spezifität solcher Regeln ist die Summe aller Auswahlspezifitäten. In #id1.class1 ist die Spezifität beispielsweise die Summe der Spezifität von #ID1 und .class1.

Das obige ist der detaillierte Inhalt vonCSS -Selektoren: Spezifität. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!