如何在設定頂級項目樣式時防止嵌套選單中的 CSS 繼承？

防止巢狀選單中的 CSS 繼承

在分層選單中，從父元素繼承的樣式有時會出現問題。本文解決了在嵌套導航選單中防止 CSS 繼承的問題，確保只有頂級項目具有特定樣式。

提供的 HTML 結構利用具有分層結構的巢狀清單。問題在於如何將樣式套用於頂層清單項目（具有“top-level-nav”類別的“li”）而不影響巢狀子項。

使用子選擇器

一種方法是使用子選擇器(">"):

#parent > child

在這種情況下，它將是：

#sidebar > .top-level-nav

這可確保樣式僅套用於「#sidebar」元素的直接後代，有效地僅針對頂級導航項目。值得注意的是，Internet Explorer 6 不支援子選擇器。

利用多個子選擇器

或者，您可以使用多個子選擇器為特定深度的元素指定樣式:

#parent child child

對於實例：

#sidebar child child

此目標是「#sidebar」內兩層深處的元素。

避免程式碼重複

避免重複子項的樣式，可以修改現有的「#sidebar ul li」規則以應用於所有嵌套列表項，而具體樣式對於頂級項目，可以使用上面提到的子選擇器來定位。

以上是如何在設定頂級項目樣式時防止嵌套選單中的 CSS 繼承？的詳細內容。更多資訊請關注PHP中文網其他相關文章！