Wie kann das letzte Element mit einer bestimmten Klasse mithilfe von „.class:last-of-type“ korrekt als Ziel ausgewählt werden?

Verstehen der Verwendung von „.class:last-of-type“

In CSS ist „.class:last-of- Der Typ-Selektor wird verwendet, um das letzte Element einer bestimmten Klasse innerhalb eines bestimmten übergeordneten Elements anzusprechen. Es ist jedoch wichtig zu beachten, dass diese Pseudoklasse ausschließlich auf Elementen operiert, was bedeutet, dass sie nicht auf Klassen angewendet werden kann.

Im bereitgestellten Beispiel ist der Selektor „.visible:last-of-type“ darauf ausgelegt Zeigt das letzte Absatzelement (

) an, das die Klasse „.visible“ innerhalb eines bestimmten Div trägt. Das Problem tritt jedoch auf, weil dem dritten Absatz nicht die Klasse „.visible“ zugewiesen ist, wodurch er unsichtbar wird.

Korrektur des Selektivitätsproblems

Um das Problem zu beheben, Sie müssen den Selektor ändern, um sicherzustellen, dass er sowohl auf Elemente mit der Klasse „.visible“ als auch auf die Position des letzten Elements innerhalb ihres unmittelbaren übergeordneten Elements abzielt:

p.visible:last-child

Dieser geänderte Selektor gibt an, dass die Stile sein sollen Wird auf das letzte Absatzelement innerhalb des div angewendet, das die Klasse „.visible“ besitzt.

Beispieldemonstration

Um die Lösung zu veranschaulichen, betrachten Sie den folgenden aktualisierten Code:

<code class="css">p {
    display: none;
}
p.visible:last-child {
    display: block;
}</code>

<code class="html"><div>
  <p class="visible">First paragraph.</p>
  <p class="visible">Second paragraph.</p>
  <p class="visible">Third paragraph.</p>
</div></code>

In diesem überarbeiteten Code ist allen drei Absätzen die Klasse „.visible“ zugewiesen und der letzte Absatz wird angezeigt.

Fazit

Wenn Sie den Unterschied zwischen der Auswahl von Elementen und Klassen verstehen, können Sie die Pseudoklasse „.class:last-of-type“ effektiv nutzen, um das letzte Element auszuwählen, das einer bestimmten Klasse in einem bestimmten Container entspricht.

Das obige ist der detaillierte Inhalt vonWie kann das letzte Element mit einer bestimmten Klasse mithilfe von „.class:last-of-type“ korrekt als Ziel ausgewählt werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!