為什麼我的 CSS `text-decoration` 在巢狀元素上無法如預期運作？

處理CSS 文字裝飾怪癖

在CSS 中，text-decoration 屬性在設定文字元素樣式時起著至關重要的作用。但是，應用文字裝飾可能並不總是按預期運行。本文深入研究了 CSS 文字修飾的複雜性，並提供了常見問題的解決方案。

問題

一位開發人員遇到了一個令人困惑的情況，其中內聯 CSS 規則文本裝飾似乎對嵌套元素沒有影響。他們編寫了以下程式碼：

ul > li {
    text-decoration: none;
}
ul > li.u {
    text-decoration: underline;
}
ul > li > ul > li {
    text-decoration: none;
}
ul > li > ul > li.u {
    text-decoration: underline;
}

此 CSS 預計只會為類別為「u」的 li 元素添加下劃線，而讓所有其他 li 元素不帶修飾。然而，在實踐中，所有 li 元素都帶有下劃線。

解

問題在於文字修飾的獨特行為。與其他文字樣式屬性如 font-weight 不同，text-decoration 不僅影響其所應用的元素，也影響其後代元素。

根據 CSS 2.1 規範，文字裝飾是在整個元素上繪製的，無論任何後代元素。這意味著在父元素上設定文字裝飾會將裝飾傳播到其子元素，即使它們有自己的文字裝飾規則。

在提供的範例中，text-decoration: none;第二個和第三個選擇器上的規則無效，因為裝飾已經從第一個選擇器傳播。

結論

理解 CSS 文字裝飾中的這種怪癖至關重要以防止意外結果。透過僅將文字裝飾應用於最外層元素並依賴嵌套元素的繼承，開發人員可以確保其 CSS 文字裝飾規則按預期運行。

以上是為什麼我的 CSS `text-decoration` 在巢狀元素上無法如預期運作？的詳細內容。更多資訊請關注PHP中文網其他相關文章！