Detaillierte Erläuterung von Beispielen für Selektoren in CSS3

Englischer Originaltext: www.456bereastreet.com/archive/200601/css_3_selectors_explained/ Chinesische Übersetzung: www.dudo.org/article.asp?id=197 Hinweis: Dieser Artikel wurde im Januar 2006 geschrieben, als IE7, IE8 und Firefox3 noch nicht veröffentlicht waren. Die gesamte im Artikel erwähnte Browserunterstützung umfasste diese drei Browserversionen nicht. Verwendung in IE8 und Fir
:nth-of-type()
:nth-of-type() Pseudo-Class und nth-child() Pseudo- Klasse Die Methode ist sehr ähnlich, außer dass sie mit Elementen des in der Regel angegebenen Typs übereinstimmt. Die folgende Regel stimmt mit jedem p-Element überein, das zum dritten untergeordneten Element des übergeordneten Elements gehört (es kann viele p-Elemente geben, die zum dritten untergeordneten Element in einem gehören, diese befinden sich jedoch unter verschiedenen übergeordneten Elementen, siehe Hinweis):
p:nth-of-type(3) { background:#ff0; }
Diese Methode ist nützlich, wenn Sie feststellen möchten, ob auf das dritte p-Element verwiesen wurde. Zuerst denken Sie vielleicht, dass dies den gleichen Effekt hat wie die Verwendung von nth-child, aber nth-child(3) zählt alle untergeordneten Elemente, sodass das Ergebnis unterschiedlich sein kann, es sei denn, alle Geschwisterelemente von p sind auch p-Elemente.
:n-te-Typ-Pseudoklasse wird derzeit von Browsern nicht unterstützt.
:nth-last-of-type-Pseudoklasse
: Das Element, auf das die nth-last-of-type-Pseudoklasse zeigt, hat mehrere Elemente desselben Typs dahinter. Wie die Pseudoklasse :nth-last-child zählt sie ab dem letzten untergeordneten Element rückwärts. Die folgende Regel entspricht dem vorletzten Geschwisterelement p (Hinweis: Es handelt sich um ein Geschwisterelement und einen Knoten derselben Ebene):
p:nth-last-of-type(2) { background:#ff0 }
:nth-last-of-type() wird derzeit von Browsern nicht unterstützt.
:last-child pseudo-class
:last pseudo-class zeigt auf das letzte untergeordnete Element im übergeordneten Element. Es hat den gleichen Effekt wie :nth-last-child(1). Die folgende Regel entspricht allen p, die das letzte untergeordnete Element im übergeordneten Element sind:
p:last-child { background:#ff0; :last-childe pseudo-class can be Wird in Mozilla-basierten Browsern verwendet. Opera unterstützt die Pseudoklasse :last-childe nicht und es gibt einen Fehler in Safri (die obige Regel stimmt mit allen p-Elementen überein). Überraschenderweise funktioniert es in OmniWeb (Betaversion 5.1.1) einwandfrei, obwohl dieser Browser auf Safari basiert. Dies kann auf die Rückkehr der neuesten Version von Apples WebKit zurückzuführen sein, da OmniWeb normalerweise eine etwas niedrigere Version von WebKit als Safari verwendet.

: Pseudoklasse des ersten Typs : Pseudoklasse des ersten Typs zeigt auf das erste Element unter Elementen desselben Typs. Es ist dasselbe wie :nth-of-type(1).

p:first-of-type {background:#ff0;🎜>:first-of-type pseudo-class wird derzeit von Browsern nicht unterstützt.
:Pseudoklasse des letzten Typs
:Pseudoklasse des letzten Typs zeigt auf das letzte Element unter den Elementen desselben Typs. Es ist dasselbe wie nth-last-of-type(1).
p:last-of-type { background:#ff0; }
:last-of-type Pseudo-Klasse wird derzeit von Browsern nicht unterstützt. :
only-childe pseudo-class
:only-childe pseudo-class zeigt auf Elemente, deren übergeordnete Elemente keine anderen untergeordneten Elemente enthalten. Es ist dasselbe wie :first-child:last-child oder :nth-child(1):nth-last-child(1) (Letzteres ist nicht professionell und prägnant genug).
p:only-child { backgound:#ff0; }
:only-childe Pseudo-Klasse ist derzeit in Mozilla-basierten Browsern verfügbar. In Safari scheint es wie folgt interpretiert zu werden: erstes untergeordnetes Element (die obige Regel wird auf alle ersten untergeordneten Elemente p im Dokument angewendet).
: Nur-Typ-Pseudoklasse
: Nur-Typ-Pseudoklasse verweist auf die übergeordneten Elemente, die keine untergeordneten Elemente desselben Typs mehr haben. Dies ist dasselbe wie :first-of-type:last-of-type oder :nth-of-type(1):nth-last-of-type(1) (Letzteres ist nicht professionell genug).
p:only-of-type { background:#ff0; }
:only-of-type Pseudo-Klasse wird derzeit von Browsern nicht unterstützt.

[Verwandte Empfehlungen]

1.

Kostenloses CSS3-Video-Tutorial

2. Integrieren Sie 20 gängige CSS/CSS3-Eigenschaften

3. h5 und CSS3 zum Erstellen eines Eingabefelds mit Eingabeaufforderungstext

4. Teilen Sie mehrere häufig verwendete aktuelle CSS3-Attribute

5. Verwenden Sie CSS, um kleine scharfe Ecken und Blaseneffekte in der Chatbox zu erstellen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung von Beispielen für Selektoren in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!