Welche Pseudoklassenselektoren gibt es in CSS3 und wie verwendet man den Pseudoklassenselektor nth-child()?

Die neuen Attribute in CSS3 bringen uns viel Komfort, wie zum Beispiel der Pseudoklassenselektor nth-child(), der jedoch von IE6-8- und FF3.0-Browsern nicht unterstützt wird, nth-of in CSS3 - type(n) (z. B. nth-of-type(1)) ist ein spezieller Klassenselektor, der personalisiertere Titel und Absätze festlegen kann. Derzeit unterstützt nth-of-type(n) jedoch nur Firefox 3, Opera und einige Browser wie Safari und Chrom.

:nth-child() wählt ein oder mehrere spezifische untergeordnete Elemente eines Elements aus. Sie können auf diese Weise auswählen:

:nth- child(length);/ *Der Parameter ist eine bestimmte Zahl und die Länge ist eine Ganzzahl*/

:nth-child(n);/*Der Parameter ist n, n wird aus 0 berechnet*/

: nth -child(n*length)/*Wählen Sie Vielfache von n aus, n beginnt bei 0*/

:nth-child(n+length);/*Wählen Sie das Element nach der Länge aus, das größer als die Länge ist*/

:nth-child(-n+length)/*Wählen Sie das Element vor der Länge aus*/

:nth-child(n*length+1);/*Wählen Sie jedes andere Element aus* / /

Beispiel:

li:nth-child(3){background:orange;}/*Setze den Hintergrund des dritten Li auf Orange*/

li :nth-child(3n){background:orange;}/*Setzt den Hintergrund des 3., 6., 9.,... aller Vielfachen von li auf orange*/

li:nth- child( n+3){background:orange;}/*Wählen Sie den li-Hintergrund von hinter dem dritten Element bis orange aus*/

li:nth-child(-n+3){background:orange ;}/* Wählen Sie das Li vor dem dritten Element aus, um den Hintergrund auf Orange zu setzen*/

li:nth-child(3n+1){background:orange;}/*Diese Methode dient dazu, eine Trennung zu erreichen Der Effekt von Auswahl eines von mehreren */

:fist-child wählt das erste untergeordnete Element eines Elements aus

Beispiel:

li:first -child { Hintergrund: grün;}/*Setzt den Hintergrund des ersten Li auf Grün*/

:last-child wählt das letzte untergeordnete Element eines Elements aus

Beispiel:

li:last-child {background: green;}/*Setzt den Hintergrund des letzten Li auf Grün*/

:nth-last-child () Wählen Sie ein oder aus Spezifischere untergeordnete Elemente eines Elements, gezählt vom letzten untergeordneten Element dieses Elements

:nth-last-child() Selektor und dem vorherigen:nth -child() ist sehr ähnlich, außer dass Hier gibt es ein zusätzliches letztes Element, daher unterscheidet sich seine Funktion von der vorherigen „:nth-child“. Es muss nur ab dem letzten Element gezählt werden, um ein bestimmtes Element auszuwählen.

Beispiel:

li:nth-last-child(4) {background: red;}/*Setzt den Hintergrund des viertletzten Li auf Rot*/

:nth-of-type() wählt das angegebene Element aus

:nth-of-type ähnelt:nth-child, außer dass es nur das im Selektor angegebene Element zählt Tatsächlich haben unsere vorherigen Beispiele alle bestimmte Elemente angegeben. Dieser Selektor ist hauptsächlich zum Auffinden von Elementen nützlich, die viele verschiedene Arten von Elementen enthalten. Es gibt zum Beispiel viele p-Elemente, li-Elemente, img-Elemente usw. unter unserer div.demo, aber ich muss nur das p-Element auswählen und jedem anderen p-Element einen anderen Stil geben. Dann können wir einfach schreiben:

p:nth-of-type(even) {background-color: lime;}

Zusätzlich zur Einstellung von n auf ungerade (gerade Zahl) oder gerade (ungerade Zahl) können Sie auch Folgendes tun set n wird auf einen Ausdruck gesetzt, zum Beispiel wählt nth-of-type(3n+2)

:nth-last-of-type() das angegebene Element aus und zählt ab dem letzten Element

Selbstverständlich kann sich jeder diesen Selektor vorstellen. Er wird genauso verwendet wie das vorherige :nth-last-child, außer dass er sich auf den Elementtyp bezieht.

Auch in IE6-8 und FF3.0 – Browser unterstützen diesen Selektor nicht

: First-of-Type wählt das erste ähnliche untergeordnete Element unter einem übergeordneten Element aus

:last-of-type wählt das letzte ähnliche untergeordnete Element eines übergeordneten Elements aus;

:nth-of-type,:nth- last-of- type;:first-of-type und :last-of-type sind in der Praxis nicht sehr aussagekräftig. Die zuvor erwähnten Selektoren wie :nth-child können diese Funktion erreichen, aber wenn Sie interessiert sind, können Sie es trotzdem herausfinden Ich persönlich denke, dass der praktische Wert nicht sehr groß ist. Solche Aussagen dienen nur als Referenz.

:only-child bedeutet, dass ein Element das einzige untergeordnete Element seines übergeordneten Elements ist

<ul>
<li>1</li>
<li>2</li>
</ul>
<ul>
<li>3</li>
</ul>

Wenn ich nur ein p-Element in ul haben muss, ändern Sie das Stil dieses li, dann können wir jetzt verwenden: only-child, wie zum Beispiel:

ul li {padding-left:10px;}

ul li:only-child {padding- left :15px}

: only-of-type wählt ein Element aus, das das einzige untergeordnete Element desselben Typs wie sein übergeordnetes Element ist

bedeutet, dass ein Element There hat Wenn es viele Unterelemente gibt und nur eines davon eindeutig ist, können wir diese Auswahlmethode verwenden, um beispielsweise das einzige Unterelement auszuwählen

<section>
<h2>伪类选择器的用法</h2>
<p>CSS3 伪类选择器only-of-type的用法</p>
<p>CSS3 伪类选择器only-of-type的用法</p>
</section>

Wenn wir nur das h2-Element oben auswählen möchten, müssen wir kann so schreiben:

h2:only-of-type{color:red;}

: Das durch leere

ausgewählte Element enthält keinen Inhalt

:empty wird verwendet, um Elemente ohne Inhalt auszuwählen, also überhaupt keinen Inhalt, sogar ein Leerzeichen, von denen einer nichts enthält und völlig leer ist Wenn dieses p nicht angezeigt werden soll, können Sie es so schreiben:

p:empty {display: none;}

Das obige ist der detaillierte Inhalt vonWelche Pseudoklassenselektoren gibt es in CSS3 und wie verwendet man den Pseudoklassenselektor nth-child()?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!