首页 > web前端 > css教程 > 为什么 CSS 中的文本装饰不能正确继承?

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

Barbara Streisand
发布: 2024-12-07 07:21:19
原创
759 人浏览过

Why Doesn't Text Decoration Inherit Correctly in 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/),子元素 spantext-decoration 属性不会覆盖父元素 一个

原因:

根据 CSS 规范,后代元素的

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

解决方案:

在 CSS3 中,有一个名为

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

例如,要显示

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

span {
  text-decoration-skip: ink;
}
登录后复制
注意

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

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

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板