Tiefes Verständnis der Prioritätsreihenfolge von CSS-Selektoren

Es gibt viele Selektoren in CSS, wie z. B. Klassenselektoren, Tag-Selektoren, ID-Selektoren usw. Heute werde ich mit Ihnen über die Priorität von CSS-Selektoren sprechen Beachten Sie die Reihenfolge und die Verwendung von !important. Ich hoffe, dass es für Sie nützlich sein wird.

1. !wichtig bedeutet höchste Priorität . Der IE6-Browser erkennt !important nicht.

Beispiel:

Normalerweise hat der unten geschriebene Stil eine höhere Priorität als der oben stehende Stil

demo1{
color:red;
color:green; /*绿色的优先级高于红色，所有浏览器都会显示绿色*/
}

Wenn !important hinzugefügt wird, ist seine Priorität relativ höher dumm und ich weiß es nicht.

demo2 {
color:red !important; /*除了ie6，其他浏览器会认为红色优先级高，显示红色字体*/
color:green; /*ie6浏览器则顺序读取css所以显示绿色*/
}

Beachten Sie jedoch, dass ie6 die Priorität von !important nicht erkennt. Dies bedeutet jedoch nicht, dass ie6 das Stilattribut mit !important nicht erkennt.

demo3{
color:red;
color:green !important; /*包括ie6，所有浏览器都显示绿色字体，ie6只是不认识优先级罢了*/
}

2. CSS (Cascading Style Sheets) Cascading Style Sheets In praktischen Anwendungen gibt es im Allgemeinen drei Cascading-Methoden.

Priorität: Inline-Stylesheet (im Tag) > Eingebettetes Stylesheet (in der aktuellen Datei) >

1. Externer Stil (auf mehrere Webseiten angewendet)

Im externen Stylesheet wird der CSS-Code als separate Datei gespeichert, z. B. in der Datei style.css, die alle Stile enthält . Die externe Kaskadierung in HTML wird mit dem 2cdf5bf648cf2f33323966d7f58a7f3f-Tag oder der @import-Anweisung eingeführt.

Der Beispielcode lautet wie folgt:

<link rel="stylesheet" href="style.css" type="text/css" /> //link 链接
@import url("style.css"); //@import 导入

2cdf5bf648cf2f33323966d7f58a7f3f Die Ähnlichkeiten und Unterschiede zwischen @import und @import finden Sie in seinem Artikel

2. auf die aktuelle Seite angewendet)

Der CSS-Code der Portal-Website ist normalerweise eingebettet, was allgemein als Inline-Stil (Inline Style) bekannt ist und das c9ccee2e6ea535a969eb3f532ad9fe89-Tag verwendet, um den Stil als internen zu definieren Blockobjekt.

Der Beispielcode lautet wie folgt:

<style type="text/css">
    body{font-family:Arial,Helvetica,sans-serif;}
</style>

Inline-CSS kann HTTP-Anfragen effektiv reduzieren, die Seitenleistung verbessern und den Serverdruck verringern. Da der Browser die Seite erst nach dem Laden des CSS rendern kann, kann er verhindern, dass die CSS-Datei unlesbar wird und die Seite leer angezeigt wird.

3. Eingebettet (auf bestimmte Tags angewendet)

Die einfachste Art, CSS zu schreiben, besteht darin, Code direkt zum geänderten Markup-Element hinzuzufügen.

Der Beispielcode lautet wie folgt:

<div style="font-family:Arial,Helvetica,sans-serif;">饿了么</div>

Obwohl dies intuitiver ist, erhöht es die Seitengröße erheblich und entspricht nicht der Designidee der Trennung von Struktur und Leistung.

3. Wenn die Gewichtungen unterschiedlich sind, bestimmt der Browser anhand der Gewichtung, welcher Selektor-CSS-Stil verwendet wird.

Gewichtungsregeln: Die Gewichtung des Labels (P, span) beträgt 1, die Gewichtung des Klassenselektors beträgt 10 und die Gewichtung des ID-Selektors beträgt bis zu 100.

Beispiel:

div {color: red;} /*Tag, Gewicht ist 1*/

div span {color: green;} /*Zwei Tags, die Gewicht ist 1+1=2*/

div>span {color: purple;} /*Das Gewicht ist das gleiche wie oben, daher wird das Proximity-Prinzip übernommen*/

.main { color: white;} /*Klassenauswahl, Gewichtungswert ist 10*/

div span.warning {color: purple;} /*Gewichtungswert ist 1+1+10=12*/

#main .con p {color: gelb;} /*Das Gewicht beträgt 100+10+1=111*/

Das obige ist der detaillierte Inhalt vonTiefes Verständnis der Prioritätsreihenfolge von CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!