Detaillierte Einführung in verschiedene CSS-Selektoren

1. Basisselektor

1. * Universeller Elementselektor, passend zu jedem Element

2. Entspricht allen Elementen, die das E-Tag

3 verwenden. Entspricht allen Elementen, die Informationen im Klassenattribut enthalten.

4. Entspricht allen Elementen mit der ID Attribut gleich Fußzeile

2. Mehrfachelement-Kombinationsselektor

5. E, F

Mehrere Elementselektor, passend zu allen E-Elemente oder F-Elemente gleichzeitig, durch Kommas zwischen E und F getrennt

6 Nachkommenelementselektor, passend zu allen Nachkommen des

E-Elements F-Element, E und F werden durch Leerzeichen getrennt 7 Selektor, entspricht allen Geschwisterelementen F

unmittelbar nach dem

E-Element 3. CSS 2.1-Attributauswahlgerät

9. att]

entspricht allen E-Elementen mit dem Attribut

att, unabhängig von dessen Wert. (Hinweis: E kann hier weggelassen werden, z. B. „[cheacked]“. Dasselbe wie unten.)

10 E[att=val] trifft alle

att-Attribute gleich „ val" E-Element

11. E[att~=val] entspricht allen E-Elementen

att-Attribut mehrere durch Leerzeichen getrennte Werte hat, von denen einer gleich ist „val“ >12. E[att|=val] stimmt mit allen E-Elementen überein, deren att-Attribut mehrere durch Bindestriche getrennte Werte hat, von denen einer mit „val“ beginnt und hauptsächlich in lang-Attributen verwendet wird, z „en“, „en-us“, „en-gb“ usw.

4

Pseudoklassen in CSS 2.1 13. E:first-child

entspricht dem ersten untergeordneten Element des übergeordneten Elements

14 E:link entspricht allen nicht angeklickten Links

15 . E:visited entspricht allen angeklickten Links

16. E:active entspricht Links, bei denen die Maus gedrückt, aber nicht losgelassen wurdeE-Element

17. E:hover entspricht dem E-Element, über dem sich die Maus befindet

18. E:focus entspricht dem E-Element 19. E:lang(c)

Entspricht dem E-Element

, dessen lang-Attribut gleich c ist

5. Pseudoelement in CSS 2.1

20. E:first-line entspricht der ersten Zeile des E-Elements

21

Der erste Buchstabe des E-Elements

22. E:vor Fügen Sie den generierten Inhalt vor dem

E-Element

E:nach ein der generierte Inhalt nach dem

E-Element

6. CSS 3-Universalselektor für Geschwisterelemente

24. E ~ F

Entspricht jedem gleichgeordneten F-Element nach dem

E-Element

7. CSS 3-Attributselektor

25 „val“]

AttributeElement, dessen Wert von att mit „val“ beginnt

26. E[att$="val"]

Attribute

Elemente, deren Wert von att endet mit „val“

27. E[att*="val"] Attribut

Element, dessen Wert von att die Zeichenfolge „val“ enthält

8. Pseudoklassen im Zusammenhang mit der Benutzeroberfläche in CSS 3

28. E:enabled

Aktivierte Elemente im Formular abgleichen

29. E:disabled

entspricht deaktivierten Elementen im Formular

30 E:checked entspricht dem ausgewählten

Radio (Radio-Button) im Formular Oder Kontrollkästchenelement

31. E::selection entspricht dem aktuell vom Benutzer ausgewählten Element

9. Strukturelle Pseudoklassen in CSS 3

32. Für HTML-Dokumente ist es das HTML-Element

33. E:nth-child(n)

entspricht dem n-ten untergeordneten Element seines übergeordneten Elements, die erste Zahl ist 1

34 -last -child(n)

entspricht dem letzten n untergeordneten Element seines übergeordneten Elements, die erste Zahl ist 1

35 E:nth-of-type(n)

und :nth-child() funktioniert ähnlich, gleicht jedoch nur Elemente ab, die das gleiche Tag

36 E:nth-last-of-type(n)

und :nth verwenden -last-child() funktioniert ähnlich, stimmt aber nur mit Elementen überein, die das gleiche Tag

37 verwenden. E:last-child

entspricht dem letzten untergeordneten Element des übergeordneten Elements, was äquivalent zu ist :nth -last-child(1)

38. E:first-of-type

entspricht dem ersten untergeordneten Element unter Verwendung desselben Tags unter dem übergeordneten Element, was äquivalent zu :nth ist -of-type(1)

39. E:last-of-type

entspricht dem letzten untergeordneten Element unter Verwendung desselben Tags unter dem übergeordneten Element, was äquivalent zu :nth-last ist -of-type( 1)

40. E:only-child

entspricht dem einzigen untergeordneten Element unter dem übergeordneten Element, was äquivalent zu :first-child:last-child oder: nth-child(1) :nth-last-child(1)

41. E:only-of-type

entspricht dem einzigen untergeordneten Element, das dasselbe Tag unter dem übergeordneten Element verwendet, was äquivalent ist zu :first-of-type:last-of-type oder:nth-of-type(1):nth-last-of-type(1)

42 > stimmt mit einem Element überein, das kein untergeordnetes Element enthält. Beachten Sie, dass Textknoten auch als untergeordnete Elemente betrachtet werden

10.

CSS 3-Anti-Auswahl Pseudoklasse 43. E:not(s)

Entspricht jedem Element, das nicht mit dem aktuellen Selektor übereinstimmt

11.

:target-Pseudoklasse in CSS 3 44. E:target

entspricht dem Effekt des Klickens auf eine bestimmte

"id" im Dokument

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in verschiedene CSS-Selektoren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!