CSS text-decoration property cannot be overridden by child element
css
Solution
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.
Problem
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?