如何可靠地設定 CSS 清單中最後一個子元素的樣式？

使用 CSS 定位最後一個子元素

設計清單中最後一個元素的樣式有時可能具有挑戰性。考慮以下 CSS 規則：

#refundReasonMenu #nav li:last-child {
  border-bottom: 1px solid #b5b5b5;
}

不幸的是，它未能達到其預期目的。要理解原因，我們需要檢查瀏覽器對 :last-child 偽類的支援。

瀏覽器支援限制

儘管 :last-child 是 CSS3 標準，偽類在某些瀏覽器中仍然面臨限制。值得注意的是，Internet Explorer 9 以下版本和 Safari 3.2 以下版本缺乏對此選擇器的支援。

即使在支援 :last-child 的瀏覽器中，例如 Internet Explorer 7 和 Safari 3.2，也必須注意其對應項目 :first-child 在這些瀏覽器中得到更廣泛的支援。

替代方案解決方案

要克服這些限制並可靠地定位最後一個子項，建議將唯一的類（例如“last-child”）顯式新增至最終清單項，並將樣式專門套用於該類別:

li.last-child {
  border-bottom: 1px solid #b5b5b5;
}

這種方法可以在更廣泛的瀏覽器中提供一致且可靠的樣式。

以上是如何可靠地設定 CSS 清單中最後一個子元素的樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！