CSS 文字修飾繼承如何運作，為什麼覆蓋它有時會失敗？

理解文字裝飾繼承

在CSS中，text-decoration屬性控制應用於文字的裝飾線條樣式。但是，與其他文字相關樣式（例如 font-weight）不同，text-decoration 的行為截然不同。

重寫繼承裝飾的問題

考慮以下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;
}

此程式碼旨在防止繼承的修飾應用於巢狀列表項目。然而，以下的 HTML 結構顯示了意想不到的結果：

<ul>
  <li>Should not be underlined</li>
  <li class="u">Should be underlined
    <ul>
      <li>Should not be underlined</li>
      <li class="u">Should be underlined</li>
    </ul>
  </li>
</ul>

解釋

問題在於文字裝飾適用於它所應用到的元素。這意味著即使您嘗試覆蓋嵌套元素上繼承的裝飾，繼承的裝飾仍然會被應用。

根據 CSS 2.1 規範，「內聯框上的文字裝飾會在整個元素上繪製」 ，遍歷任何後代元素而不關注它們的存在。 ”

解決方案

要解決此問題，需要不同的方法。不要依賴嵌套選擇器來覆蓋繼承的裝飾，而是使用替代技術，例如：

• 使用::before 或::after偽元素建立裝飾線
• 使用JavaScript動態修改text-decoration屬性
• 將text-decoration屬性直接套用到想要的元素上，而不依賴繼承

以上是CSS 文字修飾繼承如何運作，為什麼覆蓋它有時會失敗？的詳細內容。更多資訊請關注PHP中文網其他相關文章！