如何使用 CSS 設定分層導覽選單的樣式而不影響巢狀元素？

克服分層導航中的CSS 繼承

使用導航選單等分層結構時，在不影響嵌套元素的情況下自訂特定層級的樣式可能具有挑戰性。本文探討了在這種情況下防止 CSS 繼承的解決方案，特別是在側邊欄導覽選單中。

考慮以下 HTML 結構：

在此範例中，有一個預先定義主題，設定 ul 和 li 標籤的預設樣式。但是，使用者希望修改頂級清單項目而不影響子項。

要實現此目的，可以利用子選擇器：

#parent > child

透過使用此選擇器，樣式可以專門應用於第一級子元素，不包括巢狀元素。例如：

#sidebar > .top-level-nav {
  /* Styles that will only apply to top-level list items */
}

另一個解決方案是使用更具體的選擇器：

#parent child child

此選擇器將樣式應用於比父元素低一級以上的元素。例如：

#sidebar ul li child child {
  /* Styles that will only apply to elements that are three levels below the #sidebar element */
}

這些技術允許對特定元素進行有針對性的樣式設置，而不影響其嵌套的後代。但是，Internet Explorer 6 不支援子選擇器，因此在這種情況下可能需要使用替代解決方案。

以上是如何使用 CSS 設定分層導覽選單的樣式而不影響巢狀元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！