So wählen Sie das erste Element mit dem CSS-Selektor aus

So wählen Sie das erste Element mit dem CSS-Selektor aus: 1. Verwenden Sie den „First-Child“-Selektor, um das erste untergeordnete Element auszuwählen, das zu seinem übergeordneten Element gehört. 2. Verwenden Sie „Last-Child“, um das letzte Tag in der Liste auszuwählen ; 3. , verwenden Sie „nth-child(3)“, um das 3. Tag auszuwählen, und so weiter.

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

Welches Element wird mit einem Selektor in CSS ausgewählt?

Wie verwende ich den Selektor, um welches Element im CSS auszuwählen? Im folgenden Artikel erfahren Sie, wie Sie mithilfe von CSS-Selektoren den Effekt der Auswahl des ersten Elements erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

Bei der Frontend-Entwicklung können wir auf solche Anforderungen stoßen: Wir möchten, dass der erste Teil der Liste unterschiedliche Stile anzeigt, wir möchten, dass die geraden Teile der Liste unterschiedliche Hintergrundfarben anzeigen, wir möchten, dass der letzte Teil der Liste unterschiedliche Stile anzeigt Verschiedene Hintergrundfarben anzeigen Die Stile sind unterschiedlich ... wie können wir diese Anforderung erfüllen?

Wenn die vorherige Datei in PHP entwickelt wurde, kann dies tatsächlich durch die Schleifenanweisung + Beurteilungsanweisung + CSS-Stil von PHP erreicht werden. Wenn es sich jedoch um statischen Code handelt, kann PHP nicht verwendet werden.

Zu diesem Zeitpunkt können wir es auch über CSS implementieren. CSS bietet uns mehrere sehr nützliche Stilparameter: erstes Kind, letztes Kind, n-tes Kind (n). Nachfolgend sehen Sie sich ihre Verwendung genauer an.

1. Erster-Kind-Selektor wird verwendet, um den angegebenen Selektor auszuwählen, der zum ersten untergeordneten Element seines übergeordneten Elements gehört.

Wählen Sie die Hintergrundfarbe des ersten Li-Moduls in der Li-Liste.

li:first-child{background:#090}

2, letztes Kind

letztes Kind bedeutet, das letzte Etikett in der Liste auszuwählen, der Code lautet wie folgt:

li:last-child{background:#090}

3, n-tes Kind (3)

bedeutet, das dritte Etikett auszuwählen, der Code lautet wie folgt:

li:nth-child(3){background:#090}

3 im obigen Code kann auch in andere Zahlen wie 4, 5 usw. geändert werden. Wenn Sie ein Etikett auswählen möchten, geben Sie einfach die Nummer ein.

4, nth-child(2n)

Dies bedeutet, dass die Tags mit gerader Nummer in der Liste ausgewählt werden, d. h. die Tags 2., 4., 6. ....

5, nth-child(2n-1)

Dies bedeutet, dass die ungeraden Tags in der Liste ausgewählt werden, also das 1., 3., 5., 7. ... Tag.

6. n-tes Kind(n+3)

Das bedeutet, dass die Tags in der Auswahlliste vom 3. bis zum Ende beginnen.

7, nth-child(-n+3)

Dies bedeutet, dass die Beschriftungen in der Auswahlliste zwischen 0 und 3 liegen, also Beschriftungen kleiner als 3 sind.

8, nth-last-child(3)

Dies stellt das drittletzte Tag in der Auswahlliste dar.

Empfohlen: „

CSS-Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo wählen Sie das erste Element mit dem CSS-Selektor aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!