如何防止分層選單中的 CSS 繼承？

防止分層選單中的 CSS 繼承

在 CSS 中，繼承是指從父元素傳遞到子元素的樣式。雖然繼承通常是可取的，但當您想要修改嵌套層次結構中特定層級的樣式時，繼承可能會出現問題。其中一個這樣的場景出現在分層導航選單中，其中頂級項目需要自訂樣式而不影響子項目。

使用子選擇器

防止繼承的一種方法是使用子選擇器 (>)。以下 CSS 規則僅針對 #sidebar ul 元素的直接子元素：

#sidebar > ul li {
  /* styles that will not be inherited by sub-list items */
}

但是，如果您有多層嵌套列表，此方法可能不適合。

使用特定類別

另一個解決方案涉及對頂層清單項目使用特定類別。在以下HTML 中，每個頂級清單項目都有「top-level-nav」類別：

<ul>

然後您可以使用以下CSS 定位頂級項目：

#sidebar .top-level-nav {
  /* styles that will not be inherited */
}

此方法確保套用於.top-level-nav 類別的樣式不會向下級聯到子項目。請注意，如果預製主題包含子清單項目的特定樣式，您將需要覆寫這些樣式。這可以透過更具體地聲明 #sidebar .top-level-nav 的樣式或使用其他選擇器來完成。

以上是如何防止分層選單中的 CSS 繼承？的詳細內容。更多資訊請關注PHP中文網其他相關文章！