CSS `:last-child` 選擇器如何運作，有哪些替代方案？

CSS :last-child 選擇器特異性

背景：

:last-child 選擇器定位最後一個子元素特定父元素的。但是，它要求子元素是該容器中的最後一個元素。

說明：

考慮以下CSS 選擇器：

li.complete:last-child {
  background-color: yellow;
}

如果後面有任何其他元素，則此選擇器不會將指定的樣式會套用於具有“complete”類別的最後一個元素。例如，在提供的 HTML 中：

<ul>
  <li class="complete">1</li>
  <li class="complete">2</li>
  <li>3</li>
  <li>4</li>
</ul>

:last-child 選擇器不會將黃色背景應用於第二個「完整」清單項，因為它不是清單中的最後一個元素。

替代方案：

如果您需要將樣式應用於具有特定類別的最後一個元素，無論其

li.complete:last-of-type {
  background-color: yellow;
}

此選擇器將定位與「完整」類別相符的最後一個元素，即使它後面還有其他元素。

此外，您可以使用「nth-child」選擇器來定位特定類型的最後一個元素：

ul :nth-child(4) {
  background-color: yellow;
}

這將選擇第四個清單項，無論其類別為何。

jQuery 注意事項：

jQuery 選擇器$("li.complete:last-child") 將不起作用，因為它正在尋找父元素中的最後一個元素。要使用jQuery 將最後一個元素定位到特定類，可以使用「last」函數：

$("li.complete").last();

結論：

:last-child 選擇器要求該元素是父元素中的最後一個子元素。如果不是這種情況，:last-of-type 或 "nth-child" 可能會提供更合適的選擇。

以上是CSS `:last-child` 選擇器如何運作，有哪些替代方案？的詳細內容。更多資訊請關注PHP中文網其他相關文章！