防止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中文網其他相關文章!