为什么 `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中文网其他相关文章！