Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "how to use the inherit keyword in CSS", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use the inherit keyword in CSS" can help you solve your doubts.

Inherit keyword

Because of the cascading nature of CSS, some CSS attributes automatically inherit their values from the parent of the element. For example, if you set the text color of an element, all descendants of that element will inherit the same text color. Even if some property values are inherited automatically, it is possible to increase the weight of inherited attributes. In this case, using a value on an attribute that already inherits the parent value by default using inherit forces the parent value to be inherited.

One case where automatically inherited values are enforced by the inherit keyword is when the user agent's stylesheet overrides the inherited values (the default style that the browser applies to certain elements)

For example, the color value of the text is automatically passed to all descendants of the element, but in the case of a link, the color property is usually set to blue in the user agent stylesheet. In most cases, you can apply different colors to links, or inherit the same colors as the rest of the text, and may apply another visual effect that indicates that they are links (such as applying underscores or background colors, etc.). Assuming that you want the link to have the same text color as the rest of the text, you can use this attribute value to enforce color values that would normally be inherited.

Div {

Color:pink

}

A {

Color:inherit

}

Some CSS attributes do not inherit the calculated value of the element's parent, but we want to set the element's attribute value to the same value as its parent. In this case, the inherit keyword comes in handy, allowing properties that do not automatically inherit values to inherit it.

For example, if you set a blue border for an element and want all its child elements div to have the same border, you can set the inherit keyword so that they inherit the same border color as the parent element.

.el {

Padding:10px

Border:5pxsolid#0099cc

}

.child {

Padding:10px

Margin-top:20px

Border:inherit

}

.el-2 {

Margin-top:30px

Border:5pxsolidhotpink

}

.child-2 {

Border:5pxsolidinherit

Margin-top:20px

}

After reading this, the article "how to use inherit keywords in CSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.