Was sind die neuen Selektoren in CSS3?

css3-Selektoren umfassen: „[att^="val"]“, „[att$="val"]“, „[att*="val"]“, „:root“, „:nth-child“ (n)“, „:last-child“, „:only-child“, „:empty“ usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

css3 neuer Selektor

Attributselektor (von den meisten Browsern außer IE6 unterstützt)

E[att^="val"] Der Wert des Attributs att beginnt mit „ Elemente beginnend mit val "

E[att$="val"] Der Wert des Attributs att endet mit „val“-Elementen

E[att*="val"] Attribut att Element, dessen Wert das enthält String "Val"

instance: p [id^= "nav"] {Hintergrund:#000;}

struct pseudo-Klasse-Selektor (Filter Wähler)

(Hinweis: FireFox 1.5/2.0/3.0 unterstützt E:root, FireFox 3.0 unterstützt E:last-child, E:empty, da IE6/7/8 dies nicht unterstützt, also wählen Sie die entsprechende Szene und benutze es)

E :nth-child(n)E :nth-last-child(n)E :nth-of-type(n)p:only-child { background:#ff0 }p:empty {Hintergrund:#ff0}

Seriennummer

Selektor

Bedeutung

Instanz

1

E:root

entspricht dem Stammelement des Dokuments. Bei HTML-Dokumenten handelt es sich um das HTML-Element

2

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

p:nth-child(3) { color:#f00; }

3

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

p:last-child { background:#ff0; }

4

Ähnlich wie :nth-child(), stimmt aber nur mit Elementen überein, die das gleiche Tag verwenden

p:nth-of-type(2){color:red;}Wählen Sie das n-te untergeordnete Element p des übergeordneten Elements aus Tag-Element

6

E:last-child

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

7

ist E:first-of-type

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

8

E:last-of -type

match Das letzte untergeordnete Element, das denselben Tag unter dem übergeordneten Element verwendet, entspricht: nth-last-of-type(1)

9

E:only-child

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

10

E:only-of-type

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

11

E:empty

stimmt mit einem Element überein, das keine untergeordneten Elemente enthält

UI-Status-Pseudoklassenselektor (nicht unterstützt von IE6/7/8)

3 ?? E ~ F entspricht einem der gleichen Zeichen nach dem E Element Level F Elementp ~ ul { Hintergrund:#ff0 }

Inverse Auswahl-Pseudoklasse

Seriennummer	Selektor	Bedeutung	Instanz
1	E: aktiviert	Aktivierte Elemente im Formular abgleichen
2	E: deaktiviert	Deaktivierte Elemente im Formular abgleichen	input[type="text"]:disabled { background:#ddd }

Seriennummer	Selektor	Bedeutung	Instanz
1	E:nicht(e)	Kombiniere alles, was nicht passt das aktuelle Selektorelement	:not(p) { border:1px solid #ccc }

: Ziel-Pseudoklasse

Seriennummer	Selektor	Bedeutung	Beispiel
1	E:target	Der Effekt nach dem Klicken auf eine bestimmte „ID“ im passenden Dokument

(Lernvideo-Sharing: CSS-Video-Tutorial)

Das obige ist der detaillierte Inhalt vonWas sind die neuen Selektoren in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!