如何有效覆蓋CSS文字裝飾繼承？

理解 CSS 文字裝飾繼承

在 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;
}

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>

這裡，預期的行為是嵌套列表項不會收到修飾，而具有 u類別的父項將帶有下劃線。然而，結果顯示所有清單項目都帶有下劃線。

解釋

這種行為的原因在於 CSS 文字裝飾的本質。與其他字體屬性不同，文字裝飾適用於整個元素，包括所有嵌套元素。這意味著父容器中定義的裝飾會遞歸地應用於其子容器，而不管它們自己的文字裝飾樣式如何。

此行為記錄在 CSS21 規格：

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence. The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the element.

結論

覆蓋 CSS 中的文字修飾需要理解這種繼承行為。為了確保特定元素不會從其父元素繼承裝飾，有必要為每個巢狀層級定義 text-decoration: none。

以上是如何有效覆蓋CSS文字裝飾繼承？的詳細內容。更多資訊請關注PHP中文網其他相關文章！