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!