How Can I Override Inherited `text-decoration` in CSS?

Overriding CSS Properties: Understanding the Inheritance and Specificity

The text-decoration property in CSS can be tricky when it comes to overriding values from parent elements. This question explores the inability of child elements to override text-decoration and discusses the broader concept of property inheritance and specificity in CSS.

CSS Property Inheritance

CSS properties can exhibit inheritance, where values set on a parent element are inherited by its descendants unless explicitly overridden. Certain properties, however, cannot be inherited, and text-decoration falls into this category.

The Specificity of text-decoration

The CSS specification explicitly states that the text-decoration property on a descendant element has no effect on the decoration of its ancestor. This is because text decorations are drawn across the entire parent element, even over child elements.

Overriding text-decoration Using text-decoration-skip

To override text-decoration for a child element, you can use the text-decoration-skip property. Introduced in CSS3, text-decoration-skip specifies which parts of the child element's content should be skipped by text decorations inherited from the parent.

Conclusion

Property inheritance and specificity are important concepts to understand when working with CSS. Some properties, such as text-decoration, cannot be overridden by child elements, while others can be controlled through careful use of cascading rules and specificity.

The above is the detailed content of How Can I Override Inherited `text-decoration` in CSS?. For more information, please follow other related articles on the PHP Chinese website!