CSS文本装饰属性不能被子元素覆盖

  • Z时代
  • 2024-01-10
  • 分类：问答

看一个简单的例子：

<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;   
}

正如您在JSfiddle上的演示中所看到的那样，SPAN元素将覆盖其祖先ANCHOR元素的color和font-

family属性值。但是，由于text-decoration某些原因该属性不会被覆盖。

我假设某些CSS属性可以被祖先元素覆盖，而其他一些CSS属性则不能。

是这样吗？如果是的话，我怎么知道哪些可以被覆盖，哪些不能被覆盖？

回答：

从[text-decoration规格]：

后代元素的“文本装饰”属性对祖先的装饰没有任何影响。

进一步引用（不过我在规范中找不到此文本）：

内联框上的文本装饰绘制在整个元素上，跨越任何后代元素，而无需注意它们的存在。

还有另一句话，CSS3似乎引入了text-decoration-skip，旨在通过将属性应用于后代（在您的情况下为<span>）来解决此问题：

此属性指定影响元素的文本修饰必须跳过元素内容的哪些部分。它控制元素绘制的所有文本装饰线，以及其祖先绘制的所有文本装饰线。

以上是 CSS文本装饰属性不能被子元素覆盖 的全部内容， 来源链接： utcz.com/qa/404311.html

回到顶部