Detaillierte Erläuterung verschiedener CSS-Selektoren, Import-Stylesheets und einiger Pseudoklassen-Selektoren

(1) CSS-Selektor:

1. Tag-Selektor: Wählen Sie das Tag direkt über den HTML-Tag-Namen aus

2. Klassenselektor: über den Namen des Selektors { } Zur Auswahl Tags mit hinzugefügtem Klassenattribut

　　3. ID-Selektor: Verwenden Sie #name des Selektors{}, um Tags mit hinzugefügtem ID-Attribut auszuwählen. Die ID ist im HTML-Dokument eindeutig.

4. Universeller Selektor: Verwenden Sie *{} zur Auswahl aller Tags im HTML-Dokument

5. Nachkommen-Selektor: Selektor 1 (Leerzeichen) Selektor 2 zur Auswahl eines Tags Alle entsprechenden Unter-Tags

6. Untergeordneter Selektor: Selektor 1 > Selektor 2, um die direkt generierten Unter-Tags in einem Tag auszuwählen, was bei tieferen Tags nicht funktioniert

7. Schnittpunkt-Selektor: Selektor 1 (kein Leerzeichen in der Mitte) Selektor 2 Zum Beispiel # li.li{} wählt ein Tag mit ID=li und class=li aus

8. Union-Selektor: Selektor 1. Selektor 2 Zum Beispiel: #li.li{} wählt das Tag mit ID=li oder Klasse aus =li

(2) Priorität des Selektors:

1. Als gleichwertig behandeln Die Beschriftungen der Ebene wirken sich beispielsweise alle direkt auf die Beschriftung li aus: ID-Selektor> Klassenselektor>Labelselektor>Universalselektor

　2. Der innerste Selektor hat Vorrang vor dem äußeren: div ul li>#ul li-Tag befindet sich auf der innersten Seite von ul. Alle Stile, die die äußere ID abdecken können Selektor

3. Wenn er auf derselben Ebene verwendet wird und der letzte Ebenenselektor derselbe ist, hat der genauere Vorrang. Je höher die Ebene: div ul li>div li

　4. Wenn die Prioritäten genau gleich sind, decken die späteren Stile nun die vorherigen Stile ab

　Ergänzung: 5. Prioritätsalgorithmus: style = 1000 (Inline-Stylesheet) id = 100 (id-Selektor) class = 10 (Klassenselektor) Element = 1 (Labelselektor) Verwendung: Die Voraussetzung ist, dass es auf derselben Ebene wirkt: wie #ul li{} und ul # Welches der beiden hat eine höhere Priorität? Die Priorität wird als 101 (100+1) ausgedrückt, und die Priorität des letzteren ist 101 (1+100), daher ist die Priorität dieselbe. Die Voraussetzung ist, dass die beiden Selektoren auf derselben Ebene agieren müssen

(3) Drei Möglichkeiten zum Verknüpfen des Stylesheets: Importieren des Stylesheets

1. Inline-Stylesheet: im HTML-Tag geschrieben, durch Das Stilattribut hat die höchste Priorität, kombiniert jedoch HTML-Code und CSS Code, der nicht dem CSS-Standard „Trennung von Inhalt und Stil“ entspricht und keine spätere Wartung nutzt

2. Interne Stiltabelle: Geschrieben im Sub-Tag-Stil des Kopfes, der Die Trennung von Inhalt und Stil wird bis zu einem gewissen Grad erreicht, die Referenzmethode zur Stilwiederverwendung kann jedoch nicht realisiert werden:

3. Externes Stylesheet: realisiert Die Trennung von Inhalt und Stil erleichtert die spätere Wartung und Wiederverwendung, entspricht den W3C-Standards und hat die niedrigste Priorität. Referenz: im Head-Tag durch

4. Stylesheet importieren: Importieren Sie im internen Stylesheet-Stil das CSS-Stylesheet

über die @import-URL (CSS-Ressourcenadresse). Hinweis: Intern Der Unterschied zwischen Stylesheet und Importimport :

　　　1) Das Link-Tag ist ein HTML-Tag, aber der Import ist nicht

　　　　　　　　　　　　　　　　　　　　　　　　　　　🎜>

　　　3) Das Link-Tag fungiert als Brücke zwischen HTML-Code und CSS-Stil und verknüpft den CSS-Code, während import das CSS-Stylesheet importiert, das die CSS-Datei in HMTL importiert Das Dokument wird geladen

4) Die Link-Methode besteht darin, den CSS-Stil zu verknüpfen, während das Dokument geladen wird, während der Import darin besteht, den CSS-Stil zu importieren, nachdem das HTML-Dokument fertiggestellt ist

Abschließend Wählen Sie am besten das zu verlinkende Link-Tag aus

🎜>

(4) Pseudoklassenselektor:

Selektorname: Pseudoklasse {}, ein Status der Pseudoklassenbezeichnung , zum Beispiel: a:link{}: Der Stil der Beschriftung a:hover{}: der Stil, der angezeigt wird, wenn die Maus auf der Beschriftung platziert wird Die Maus wird auf das a-Label gedrückt; a:visited{}: Wenn das a-Label besucht wird, kann es auch so aussehen: a:first-chird{} bedeutet, dass das a-Tag einen übergeordneten Container und das erste untergeordnete Element hat Tag a unter dem übergeordneten Container ist ausgewählt

Weitere Details zu verschiedenen CSS-Selektoren und -Importen Bitte beachten Sie die chinesische PHP-Website für Artikel zum Importieren von Stylesheets und einigen Pseudoklassen-Selektoren!