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