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🎜🎜| 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 | Element, das das letzte Element ist |
| 3 | :only-of-typep: only-of-type wählt das einzige | Element seines übergeordneten Elements ist |
| |
| :only-child |
p:only-child Wählen Sie jedes
| ist 3... | |
| :nth-last-child( | 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 |
| :nth-of-type( | n | )
p: nth-of-type(2) Wählt jedes | Element aus, das das zweite | < ist ;P>
| 3 | :nth-last-of-type( | n) p:nth-last-of-type(2) |
wählt jedes |
| -Element seines übergeordneten Elements ist, ab der Anzahl der letzten untergeordneten Elemente | 3
: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) | 3||
| Eingabe: aktiviert | Wählen Sie jedes aktivierte Eingabeelement aus | Eingabe: geprüft Wählen Sie jedes ausgewählte Eingabeelement aus |
::selection |
| Der Teil des passenden Elements, der vom Benutzer ausgewählt oder hervorgehoben wird | 3 | :out-of-range | |
| Entspricht | < | input>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 |
| element | p | alle -Elemente auswählen lt ;p> ;element |
div p
| element | aus Elementdiv>p | ||
|---|---|---|---|
| 2 | [ | attribute] | [target] |
| [ | attribute= aus | Wert] | [target=_blank] |
| 2 | [ | attribute~= | value|
| [title~=flower]Titel auswählen Das Attribut enthält alle Elemente mit dem Wort „Blume“ | 2 | [ | attribute|
| ][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 | Wählen Sie das Eingabeelement mit Fokus aus ::first-line
| ::first-line Wählt die erste Zeile jedes -Elements aus |
1 | ::first-child | |
| ::first -child | Gibt den Stil nur an, wenn das -Element das erste untergeordnete Element seines übergeordneten Elements ist. |
2 | |
| p::before | Fügen Sie Inhalt vor jedem -Element ein |
2 | |
| p : :nachher | Inhalt nach jedem -Element einfügen |
2 | |
| Sprache)p:lang(it) | Wählen Sie einen Startwert für das lang-Attribut. Alle2 |
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!
