Welche neuen Selektoren werden zu CSS3 hinzugefügt?

Zu den neuen Selektoren in CSS3 gehören: „:first-of-type“, „:last-of-type“, „:last-child“, „:root“, „:empty“, „:target“, „ :enabled“, „:disabled“, „:valid“ usw.

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

Um mit CSS eine Eins-zu-Eins-, Eins-zu-Viele- oder Viele-zu-Eins-Kontrolle über Elemente in einer HTML-Seite zu erreichen, müssen Sie CSS-Selektoren verwenden.

Elemente in HTML-Seiten werden über CSS-Selektoren gesteuert.

CSS-Selektoren werden verwendet, um das Muster der Elemente auszuwählen, die Sie formatieren möchten.

Neue Selektoren in CSS3

Die neuen Selektoren in CSS3 sind hauptsächlich in vier Kategorien unterteilt: Attributselektoren, Beziehungsselektoren, strukturierte Pseudoklassenselektoren und Pseudoelementselektoren. Die spezifische Einführung lautet wie folgt:

1. Attributselektor

Der Attributselektor kann Tags basierend auf den Attributen und Attributwerten von Webseiten-Tags auswählen.

Attributselektoren umfassen hauptsächlich E[att^=value], E[att$=value] und E[att*=value] Diese drei Geschlechtswähler. E[att^=value]、E[att$=value]和E[att*=value]这三种性选择器。

2、关系选择器

CSS3中的关系选择器主要包括子代选择器和兄弟选择器。

(1)关系选择器

(2)临近兄弟选择器

(3)普通兄弟选择器

3、结构化伪类选择器

结构化伪类选择器可以减少文档内class属性和id属性的定义，使文档变得更加简洁。

4、伪元素选择器

伪元素选择器一般是一个标记后面紧跟英文冒号“:

2. Beziehungsselektor

Der Beziehungsselektor in CSS3 umfasst hauptsächlich den Nachkommenselektor und den Geschwisterselektor. 🎜🎜(1) Beziehungsselektor🎜🎜(2) Nahgeschwisterselektor🎜🎜(3) Gewöhnlicher Geschwisterselektor🎜🎜🎜3. Strukturierter Pseudoklassenselektor🎜🎜🎜Strukturierter Pseudoklassenselektor kann den Inhalt des Dokuments reduzieren Die Definition von Klassenattributen und ID-Attributen macht das Dokument prägnanter. 🎜🎜🎜4. Pseudoelementselektor 🎜🎜🎜Pseudoelementselektor ist im Allgemeinen eine Markierung, gefolgt von einem englischen Doppelpunkt „:“, und auf den englischen Doppelpunkt folgt der Name des Pseudoelements. 🎜🎜🎜Neue Auswahlliste in CSS3🎜🎜 Element, das das letzte Element ist 3:only-child ist 3... :nth-last-child()

3:nth-of-type()

< ist ;P> Element :nth-last-of-type(

aus Element, das das zweite

3

3 Elemente (einschließlich Textknoten)3: aktiviertEingabe: aktiviertWählen Sie jedes aktivierte Eingabeelement aus ::selection::selectionDer Teil des passenden Elements, der vom Benutzer ausgewählt oder hervorgehoben wird3:out-of-range:out-of-range Entspricht inputelement1

Selector	Beispiel	Beispielbeschreibung	CSS
element1~element2	p~ul	Select Element nach dem Element	3
[attribute^=value]	a[src^="https"]	Wählen Sie die Elemente aus, deren Wert jedes src-Attributs mit „https“ beginnt	3
[ attribute $=value]	a[src$=".pdf"]	Wählen Sie Elemente aus, deren src-Attributwert mit „.pdf“ endet	3
[attribute* =value]	a[src*="44lan"]	Wählen Sie jedes Element aus, dessen src-Attributwert die Teilzeichenfolge „44lan“ enthält	3
:first-of-type	p :first-of-type	Wählt das erste -Element jedes -Elements aus, das sein übergeordnetes Element ist
3		:only-of-typep: only-of-type wählt das einzige Element, das das einzige	Element seines übergeordneten Elements ist
		p:only-child Wählen Sie jedes Element aus, das das einzige untergeordnete Element seines übergeordneten Elements
	n	p:nth-last-child(2) Wählt jedes	Element aus, das das zweite untergeordnete Element seines übergeordneten Elements ist, beginnend mit dem letztes Kind
	n	p: nth-of-type(2) Wählt jedes	Element aus, das das zweite
3		n) p:nth-last-of-type(2)	wählt jedes
-Element seines übergeordneten Elements ist, ab der Anzahl der letzten untergeordneten Elemente		:last-childp:last-child Wählt jedes	aus Element, das das letzte untergeordnete Element seines übergeordneten Elements ist.
3		:target#news:targetWählt das aktuell aktive #news-Element aus (die angeklickte URL, die diesen Ankernamen enthält)
		Eingabe: geprüft Wählen Sie jedes ausgewählte Eingabeelement aus
	<	>elements, deren Wert außerhalb des angegebenen Bereichs liegt	3
:in-range	:in-range	matches <input>elements	3
:read-write	:Lesen-Schreiben	wird verwendet, um lesbare und beschreibbare Elemente abzugleichen.	3
:read-only	:read-only	wird verwendet, um diejenigen mit dem Attributsatz „readonly“ abzugleichen. Element	3
:optional	:optional	wird verwendet, um optionale Eingabeelemente abzugleichen.	3
:required	:required	wird verwendet, um Elemente mit dem Attributsatz „erforderlich“ abzugleichen.	3
:valid	: galid	wird verwendet, um Elemente anzupassen, deren Eingabewert legal ist. Wissen: CSS1, CSS2-Selektorliste Wählen Sie alle Elemente mit class="intro"	aus 2
		p	alle -Elemente auswählen lt ;p> ;element

element

div p

wählen Sie alle

-Elemente

aus ElementWählt alle

-Elemente aus, deren Eltern ein

-Element ist. Das p>-Element nach dem div>-Element

attribute wählt alle Elemente mit dem Zielattribut attributeWert Alle Elemente mit target="_blank" auswählenattributevalue]attribute|=Sprache:Linka:besucht Wählen Sie das Eingabeelement mit Fokus aus ::first-linep1::first-childp2::before2::after2::lang(Wählen Sie einen Startwert für das lang-Attribut. Alle

(Lernvideo-Sharing: CSS-Video-Tutorial, Web-Frontend)

	element		div>p
2	[	]	[target]
[	= aus	]	[target=_blank]
2		[	~=
[title~=flower]Titel auswählen Das Attribut enthält alle Elemente mit dem Wort „Blume“	2		[
][lang|=en]	Wählen Sie alle Elemente mit einem Startwert von lang attribute="EN" Element aus	2
a:LinkAlle nicht besuchten Links auswählen	1		:besucht
Alle besuchten Links auswählen1.	:aktiv	a:aktiv	Wählen Sie den aktiven Link aus
::first-line Wählt die erste Zeile jedes -Elements aus
::first -child	Gibt den Stil nur an, wenn das -Element das erste untergeordnete Element seines übergeordneten Elements ist.
p::before	Fügen Sie Inhalt vor jedem -Element ein
p : :nachher	Inhalt nach jedem -Element einfügen
Sprache)p:lang(it)	2

Das obige ist der detaillierte Inhalt vonWelche neuen Selektoren werden zu CSS3 hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!