为什么 CSS 中的文本装饰不能正确继承？

CSS 文本修饰覆盖问题

在 CSS 属性层次结构中，特定属性优先于从父元素继承的属性。但是，text-decoration 属性对此规则表现出例外。

问题：

考虑以下代码：

<a href="#">
  A <span>red</span> anchor
</a>

a {
  color: blue;
  font-family: Times New Roman;
  text-decoration: underline;
}

span {
  color: red;
  font-family: Arial;
  text-decoration: none;
}

如此所示[demo](http://jsfiddle.net/5t9sV/)，子元素 span 的 text-decoration 属性不会覆盖父元素 一个

原因：

根据 CSS 规范，后代元素的

text-decoration 属性“不能对装饰产生任何影响”祖先的。”这本质上意味着文本装饰会应用于整个元素，无论是否存在任何子元素。

解决方案：

在 CSS3 中，有一个名为

的属性text-decoration-skip 可以应用于子元素以跳过继承的文本装饰。但是，它仅适用于内联元素（例如，span），并且支持的浏览器可能有所不同。

例如，要显示

span 元素内的文本没有下划线，您可以添加：

span {
  text-decoration-skip: ink;
}

注意

墨迹是 text-decoration-skip 的可能值之一，其中包括字符、空格和嵌入对象。

以上是为什么 CSS 中的文本装饰不能正确继承？的详细内容。更多信息请关注PHP中文网其他相关文章！