Heim  >  Artikel  >  Web-Frontend  >  Übersicht über neue Selektoren in CSS3

Übersicht über neue Selektoren in CSS3

高洛峰
高洛峰Original
2017-02-15 13:09:071494Durchsuche

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.

nth-last-child() Rückwärts auswählen

: 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

wird nur wirksam, wenn die Sammlung nur eines hat Element.


::selection

kann nur zwei Attribute festlegen: Hintergrund, Farbe.



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-Elternteils

2 ü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.

Verwenden Sie also diese beiden Pseudoklassen und fügen Sie ihnen ein übergeordnetes Element hinzu kann als erste Implementierung betrachtet werden.
  **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

:last-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.


Für eine weitere Übersicht über die neuen CSS3-Selektoren beachten Sie bitte die entsprechenden Artikel auf der chinesischen PHP-Website!

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