如何防止分層結構中的 CSS 繼承？

防止CSS 繼承

建立導航選單等分層結構時，通常需要將樣式應用於父元素而不影響其子元素。這可能具有挑戰性，因為 CSS 繼承會自動將樣式沿著 HTML 樹級聯。

要解決此問題，請考慮使用子選擇器（“>”）。透過在子元素前面加上其父元素，您可以指定僅套用於特定父元素的直接子元素的樣式。例如，使用以下程式碼：

#sidebar > .top-level-nav {
  /* Styles for top-level navigation items */
}

「.top-level-nav」類別中的樣式將僅套用於「#sidebar」元素的直接後代，不包括任何巢狀清單項目。

或者，您可以使用「子級的子級」選擇器（「>」）來定位直接後代層級以外的元素。此語法可讓您指定套用於比其父級低一級以上的元素的樣式。例如，使用以下程式碼：

#sidebar .top-level-nav > li {
  /* Styles for sub-heading elements */
}

此選擇器將專門對子標題清單項目套用樣式，確保它們繼承自「.top-level-nav」類，同時覆寫以下樣式可能是從更高等級的父母那裡繼承的。

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