如何使用'.class:last-of-type”正確定位特定類別的最後一個元素？

理解「.class:last-of-type」的用法

在CSS中，「.class:last-of- type ”選擇器用於定位給定父元素中特定類別的最終元素。然而，值得注意的是，這個偽類僅對元素進行操作，這意味著它不能應用於類別。

在提供的範例中，「.visible:last-of-type」選擇器旨在顯示特定 div 中帶有「.visible」類別的最後一個段落 (

) 元素。但是，出現問題是因為第三段沒有分配「.visible」類，使其不可見。

修正選擇性問題

要解決該問題，您需要更改選擇器以確保其目標元素同時具有「.visible」類別及其直接父級中最後一個元素的位置：

p.visible:last-child

此修改後的選擇器將指定樣式應為套用於擁有「.visible」類別的div 中的最後一個段落元素。

範例示範

為了說明解決方案，請考慮以下更新的程式碼：

<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>

在這個修改後的程式碼中，所有三個段落都分配了“.visible”類，並且將顯示最後一段。

結論

透過理解選擇元素和類別之間的區別，您可以有效地利用「.class:last-of-type」偽類來定位指定容器中與特定類別相符的最終元素。

以上是如何使用'.class:last-of-type”正確定位特定類別的最後一個元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！