CSS文本装饰属性不能被子元素覆盖 [英] CSS text-decoration property cannot be overridden by child element

问题描述

可能重复：

如何获取CSS文本装饰覆盖？

看看这个简单的例子：

 < a href =＃> < span>红色< / span>锚< / a> 
  

  a {
颜色：蓝色; 
 font-family：Times New Roman; 
 text-decoration：underline; 
} 
 
 span {
 color：red; 
 font-family：Arial; 
 text-decoration：none; 
} 
  

现场演示： > http://jsfiddle.net/5t9sV/

您可以参见JSfiddle的演示，SPAN元素覆盖其祖先ANCHOR元素的颜色和 font-family 属性值。但是， text-decoration 属性由于某种原因不会被覆盖。

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

是这样吗？
如果是，我如何知道哪些可以和不能被重写？

解决方案

=http://www.w3.org/TR/CSS21/text.html#lining-striking-props> text-decoration spec ：

后代元素的'text-decoration'属性不能对祖先的装饰产生任何影响。

链接问题中的答案进一步引用了（我在标准中找不到此文本）：

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

另一句话，CSS3似乎引入了 < span> code>）：

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




Possible Duplicate:
How do I get this CSS text-decoration override to work?

Take a look at this simple example:

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

Live demo: http://jsfiddle.net/5t9sV/

As you can see in the demo on JSfiddle, the SPAN element overrides the color and font-family property values of its ancestor ANCHOR element. However, the text-decoration property does not get overridden for some reason.

I assume that some CSS properties can be overridden by ancestor elements, and some other CSS properties cannot.

Is that so? And if yes, how can I know which ones can and cannot be overridden?

解决方案

From the text-decoration spec:

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

The answer in the linked question further quotes (I can't find this text in the spec anymore however):

Text decorations on inline boxes are drawn across the entire element, going across any descendant elements without paying any attention to their presence.

And another quote, CSS3 seems to introduce text-decoration-skip, intended to address this by applying the property on the descendant (in your case, <span>):

This property specifies what parts of the element's content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

这篇关于CSS文本装饰属性不能被子元素覆盖的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！