看一个简单的例子:
<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某些原因该属性不会被覆盖。
color
font- family
text-decoration
我假设某些CSS属性可以被祖先元素覆盖,而其他一些CSS属性则不能。
是这样吗?如果是的话,我怎么知道哪些可以被覆盖,哪些不能被覆盖?
从[text-decoration规格]:
后代元素的“文本装饰”属性对祖先的装饰没有任何影响。
进一步引用(不过我在规范中找不到此文本):
内联框上的文本装饰绘制在整个元素上,跨越任何后代元素,而无需注意它们的存在。
还有另一句话,CSS3似乎引入了text-decoration-skip,旨在通过将属性应用于后代(在您的情况下为<span>)来解决此问题:
text-decoration-skip
<span>
此属性指定影响元素的文本修饰必须跳过元素内容的哪些部分。它控制元素绘制的所有文本装饰线,以及其祖先绘制的所有文本装饰线。