Heim > Artikel > Web-Frontend > Übersicht über neue Selektoren in CSS3
selector:first-child Dies ist ein Nachkommen-Selektor. Seien Sie vorsichtig, ihn zu vermeiden, anstatt ihn zu verstehen.
selector:first-child
当前 selector 选中的元素集合中的第一个元素
selector:last-child
当前 selector 选中的元素集合中的最后一个元素.
Aber es gibt ein Problem: :last-child wird nicht wirksam
sollte sein:
1 Das übergeordnete Element des aktuellen Selektor-Elternteils
2 Alle untergeordneten Elemente Elemente des übergeordneten Elements, [a,b, c]
3 Das erste Element der Sammlung untergeordneter Elemente. Wenn der Selektor
4 den Stil festlegt, wird er wirksam.
**if(selecor.parent.childElementList.firstElement === selector){ 生效 }**
Verwenden Sie also diese beiden Pseudoklassen und fügen Sie ein übergeordnetes Element hinzu. Es kann als erste Implementierung betrachtet werden.
nth-child() gilt auch für die oben genannten Regeln Raum für Entwicklung und kann ungerade/gerade erkennen, welche zur Auswahl stehen und welche zur Auswahl stehen.
: erster Typ
:last-of-type
: nth-of-type
:nth-last-of-type
:root
wählt das Stammelement des Dokuments aus :empty
wählt Elemente aus, die nicht einmal ein Leerzeichen im Element haben
:not
Negativselektor
:only-child
::selection
Selektor: erstes Kind Dies ist ein Nachkommenselektor. Seltsam, achten Sie darauf, es zu vermeiden, anstatt es zu verstehen.
selector:first -child
selector:last-child当前 selector 选中的元素集合中的第一个元素Aber es gibt ein Problem, :last-child wird nicht wirksam.
当前 selector 选中的元素集合中的最后一个元素.
sollte sein:
1 derzeit Das übergeordnete Element des Selektor-Elternteils2 übergeordnetes Element aller untergeordneten Elemente, [a,b,c]
3 Das Das erste Element der Sammlung untergeordneter Elemente wird wirksam, wenn es sich um einen Selektor
4-Set-Stil handelt.
**if(selecor.parent.childElementList.firstElement === selector){ 生效 }**nth-child() gilt auch für die oben genannten Regeln.
Beachten Sie, dass n hier viel Raum für Entwicklung hat Wählen Sie aus und mit welchen Sie beginnen möchten.
nth-last-child() Rückwärts auswählen
:first-of-type
:nth-of-type
:nth-last-of-type
:root
Wählen Sie das Dokumentstammelement aus. Es ist HTML
:empty
Wählen Sie Elemente ohne Leerzeichen im Element aus
:not
Negativer Selektor
:only-child
Wird nur verwendet, wenn die Sammlung nur ein Element enthält.
::selection
kann nur zwei Attribute festlegen: Hintergrund , Farbe.