Die Besonderheit des CSS-Selektoren berechnen

Haben Sie jemals Ihr CSS-Stylesheet eine neue Regel hinzugefügt, aber keine Änderung in den Ergebnissen auf der Seite im Browser-Fenster zu sehen? Vielleicht war der neue Selektor nicht spezifisch genug, um eine vorhandene Regel in Ihrem Stylesheet zu überstimmen. Dieser Artikel erklärt wie das spezifische Gewicht von CSS-Selektoren mathematisch zu berechnen.

Anweisungen

1 Der W3C verwendet mathematische Formeln, um das Gewicht des einen bestimmten Stil bestimmen. Je mehr Gewicht hat einen Stil, desto genauer ist es.

2 In strengen XHTML (wo Sie nicht Inline-Stile verwenden) wird die Spezifität mit drei Zahlen eingerechnet. Z. B.: 0, 0, 0. Diese Positionen sind genannt a, b, c. denken nicht an sie als Zahlen im herkömmlichen Sinne.

3 Die erste Zahl auf der linken Seite (Stellung ein) ist die wichtigste oder am stärksten gewichtet. Die erste Zahl auf der linken Seite ist die Anzahl von IDs im Selektor. ID gewinnt die meisten Punkte in diesem Spiel. Die am spezifischsten ist immer mit den meisten Punkten der ID-Selektor:

Header-Spezifität = 1, 0, 0header #logo Spezifität = 2, 0, 0 4 Die zweite Zahl gibt die Anzahl der Klasse, Pseudoklasse und Attribut-Selektoren:.post_head Spezifität = 0, 1, 0

Inhalt .post_head Spezifität = 1, 1, 0 5 Die dritte Zahl gibt die Anzahl der Selektoren Element und Pseudo-Element:p-Spezifität = 0, 0, 1

Spezifität der p-Gehalt = 1, 0, 1header #logo p Spezifität = 2, 0, 1 6 Wenn man eine Krawatte für die Anzahl von IDs, dann die Auswahl mit den meisten Klassen gewinnen. Wenn es noch ein Unentschieden, gewinnt die Auswahl mit den meisten Elementen. Wenn zwei Selektoren noch gebunden sind, ist der Konflikt durch die Position der Regel in der Kaskade aufgelöst.

7 Ein Wert in der ersten Position haben immer mehr Gewicht als ein Wert in eine andere Position, ganz gleich, welche Werte in anderen anderen Positionen. So hat beispielsweise ein Wert von 1, 0, 0 noch eine höhere Spezifität als ein Wert von 0, 0, 10.

8 Wenn Inline-Styles (wie in der Übergangszeit XHTML) zugelassen sind, werden dann vier Zahlen benötigt. Das Gewicht eines Inline-Stil ist in der ersten Position gegeben. Hier sind einige Beispiele mit vier Ziffern:

Spezifität-Gehalt = 0, 1, 0, 0content p Spezifität = 0, 1, 0, 1 Wenn Sie ein Inlinestil in den HTML-Code hinzugefügt wurden, sagen auf ein P-Element in der Content Div, dann die Zahlen wäre:1, 1, 0, 1

In diesem Fall würde die Spezifität für den Absatz mit der Inlinestil als für andere Absätze in den Inhalt Div, gewann so die Schlacht Spezifität größer sein.

Tipps & Warnungen

• Die Verwendung von eine wichtige Aussage in CSS kann jede Regel in der Kaskade überstimmen.