Heim > Artikel > Web-Frontend > CSS-Spezifität, Vererbung und Kaskadierung

CSS-Spezifität, Vererbung und Kaskadierung

黄舟Original: 2016-12-17 13:29:161145Durchsuche

1. Spezifitätsregeln

Die Spezifität eines Selektors wird durch die Komponenten des Selektors selbst bestimmt; die Spezifität besteht aus vier Teilen und ihr Anfangswert ist 0, 0, 0, 0.

1. Fügen Sie für jede ID im Selektor 0, 1, 0, 0 hinzu.

2 Für jede Klasse, Pseudoklasse und Attributauswahl im Selektor. 0, 1, 0;

3. Für jedes Element oder Pseudoelement im Selektor tragen 0, 0, 0, 1;

4 bei .

Hinweis:

1. 0, 0, 1, 0 sind spezifischer als 0, 0, 0, 13.

2. Die Besonderheit des Platzhalters * ist 0, 0, 0, 0. Das Kombinationszeichen (z. B. „+“ in h1+p) hat überhaupt keine Besonderheit; Der Stil ist nichts Besonderes.

Bitte beachten Sie den folgenden Code:

<head> 
<style> 
*{ 
color:red; 
} 
body{ 
color:cyan; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthisparawillbe?</p> 
</body>

Die Seite wird wie folgt angezeigt:

CSS-Spezifität, Vererbung und Kaskadierung

4. Der Inline-Stil hat den höchsten Wert Spezifität, die 1 ,0,0,0 beträgt.

5. Eine mit !wichtig gekennzeichnete Aussage wird als wichtige Aussage bezeichnet. Sie weist keine besonderen Merkmale auf, sollte jedoch getrennt von unwichtigen Aussagen betrachtet werden.

Konkret: Unwichtige Aussagen werden in einer Gruppe zusammengefasst, und Konflikte zwischen ihnen werden mithilfe der Spezifität gelöst; wichtige Aussagen werden in einer Gruppe zusammengefasst, und Konflikte zwischen ihnen werden intern gelöst; wichtige Aussagen sind immer wichtiger als unwichtige Aussagen Aussage hat Vorrang.

2. Vererbung

1. Wenn Sie sich daran erinnern, können Sie viele Probleme besser verstehen.

Bitte beachten Sie den folgenden Code:

<head> 
<style> 
p{ 
color:red; 
} 
</style> 
</head> 
<body> 
<p>Whatkindofcolorthis<ahref="#">link</a>willbe?</p> 
</body>

Seiteneffekt:

CSS-Spezifität, Vererbung und Kaskadierung

Warum ist die Farbe des

-Elements? auf Rot eingestellt, aber die Farbe des -Elements ist blau?

Das liegt nicht daran, dass das -Element nicht die Farbe des übergeordneten Elements erbt (entschuldigen Sie, dass ich das vorher gedacht habe), sondern weil das -Element die Farbe des

-Elements erbt ;-Element, aber dieser geerbte Stil hat überhaupt keine Besonderheiten. Der Standardstil des Browsers ist jedoch spezifischer, daher folgt das -Element Standardstil anzeigen.

2. Zur Vererbung in CSS: Im Allgemeinen können nur untergeordnete Elemente den Stil des übergeordneten Elements erben. Dies bedeutet, dass der Stil im DOM nur nach unten und nicht nach oben weitergegeben werden kann. Es gibt jedoch eine Ausnahme: den Hintergrundstil, der auf den Körper angewendet wird Element kann nach oben an das HTML-Element übergeben werden, dessen Leinwand entsprechend definiert werden kann.

3. Kaskadierung

Stapelregeln:

1. Wichtige Erklärung für Leser > Wichtige Erklärung für Autoren > Allgemeine Erklärung für Leser >

2. Wenn die Gewichte gleich sind, werden sie nach ihrer Spezifität sortiert und diejenige mit der höheren Spezifität gewinnt.

3. Wenn die Besonderheiten gleich sind, sortieren Sie sie nach der Reihenfolge im Stylesheet, und diejenige, die später erscheint, gewinnt.

Übrigens wird genau aufgrund dieser Regel die Reihenfolge von LoVe-HA verwendet, um Link-Stile zu deklarieren (LoVe-HA ist: link; :visited; :hover; :aktiv).

Das Obige ist der Inhalt der CSS-Spezifität, Vererbung und Kaskadierung. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!

Stellungnahme：

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

Vorheriger Artikel：CSS-Stylesheets: verlinken oder einbettenNächster Artikel：CSS-Stylesheets: verlinken oder einbetten

In Verbindung stehende Artikel

Mehr sehen