為什麼 `text-decoration: none` 不總是刪除嵌套 CSS 元素中的文字裝飾？

理解 CSS 文字裝飾覆蓋

在 CSS 中，text-decoration 屬性允許新增或刪除文字效果，例如底線或刪除線。但是，您可能會遇到這樣的情況：您的覆蓋嘗試刪除文字裝飾似乎不起作用。這是因為 text-decoration 的行為與其他文字樣式屬性（如 font-weight）不同。

嵌套元素傳播

理解這種行為的關鍵在於文字裝飾風格。當您將文字裝飾應用於元素時，它不僅會影響該元素，還會影響其中的任何嵌套元素。這表示在父元素上設定 text-decoration: none 只會刪除父元素本身的裝飾，但任何子元素都會繼承父元素的裝飾。

範例

在提供的範例中，您有以下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 應用於HTML 將導致巢狀清單項目（

內的
• ）也接收文字裝飾，即使您已明確設定文字裝飾：沒有關於這些元素。這是因為父 li（帶有“u”類別）將其文字裝飾繼承到其子元素。

  要從巢狀清單項目中移除裝飾，您需要在每個元素上指定 text-decoration: none巢狀層級。這看起來像是：

  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: none; /* Added */
  }

  進一步的考慮因素

  請記住，瀏覽器的行為在文字修飾傳播方面可能會有所不同。一些瀏覽器更嚴格地解釋規範並按照上面的描述應用它，而其他瀏覽器甚至可能使用文字裝飾來傳播裝飾：沒有在後代元素上設定。

以上是為什麼 `text-decoration: none` 不總是刪除嵌套 CSS 元素中的文字裝飾？的詳細內容。更多資訊請關注PHP中文網其他相關文章！