如何有效覆盖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中文网其他相关文章！