Verwenden Sie den Pseudoklassenselektor :nth-last-of-type(3), um den Stil des drittletzten Elements desselben Typs auszuwählen

Verwenden Sie den Pseudoklassenselektor :nth-last-of-type(3), um den drittletzten Stil unter Elementen desselben Typs auszuwählen.

In CSS benötigen wir häufig , um den Stil des drittletzten Elements auf der Webseite auszuwählen. Elemente werden gestylt. Manchmal müssen wir das drittletzte Element desselben Elementtyps auswählen und ihm einen bestimmten Stil zuweisen. Zu diesem Zeitpunkt können wir den Pseudoklassenselektor :nth-last-of-type(3) verwenden, um diese Aufgabe abzuschließen.

Werfen wir zunächst einen Blick auf die Syntax des Pseudoklassenselektors :nth-last-of-type(3):

:nth-last-of-type(n)

Im obigen Code ist n stellt eine Ganzzahl dar, die angibt, dass wir das vorletzte Element auswählen möchten. In unserer Anforderung müssen wir das drittletzte Element auswählen, also setzen wir n auf 3.

Als nächstes schauen wir uns ein konkretes Beispiel an:

HTML-Code:

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
</ul>

CSS-Code:

li:nth-last-of-type(3) {
    color: red;
    font-weight: bold;
}

Im obigen Beispiel haben wir eine ungeordnete Liste mit 6 Listenelementen. Wir möchten das drittletzte Listenelement auswählen und ihm eine rote Schriftart und einen fetten Stil zuweisen. Um diesen Zweck zu erreichen, können wir den Selektor :nth-last-of-type(3) verwenden.

Wenn wir den obigen Code ausführen, wird Listenelement 4 als drittletztes Element ausgewählt und eine rote Schriftart und ein fetter Stil werden angewendet. Andere Listenelemente sind nicht betroffen.

Eine Erinnerung hier: Wenn wir den Selektor :nth-last-of-type(3) verwenden, müssen wir auf die hierarchische Beziehung des Selektors achten. Wenn unser Zielelement kein direkt abgeleitetes Element ist, sondern in anderen Elementen verschachtelt ist, müssen wir die Schreibweise des Selektors entsprechend der spezifischen Situation anpassen. Bezüglich der hierarchischen Regeln von Selektoren können Sie auf die entsprechenden Spezifikationen von CSS-Selektoren verweisen.

Zusammenfassend lässt sich sagen, dass mit dem Pseudoklassenselektor :nth-last-of-type(3) problemlos das drittletzte Element desselben Typs ausgewählt und der angegebene Stil darauf angewendet werden kann. Anhand der obigen Beispiele können wir schnell loslegen und verstehen, wie dieser Selektor verwendet wird, um ihn besser in der tatsächlichen Entwicklung anwenden zu können.

Das obige ist der detaillierte Inhalt vonVerwenden Sie den Pseudoklassenselektor :nth-last-of-type(3), um den Stil des drittletzten Elements desselben Typs auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!