Analysis of inherit usage in CSS

This article mainly introduces a summary of inheritance skills in CSS. The use of inheritance keywords in CSS is the basic knowledge for introductory learning of CSS. Friends who need it can refer to it

If you don’t pay attention, it will be easy. The features of cascading style sheets will be ignored. Most developers are aware of the inherit keyword, but there are several new CSS3 inheritance features you may not be aware of...
　property: inherit;

The inherit keyword stands for "Use the specified All values ​​given to the parent element". If there is no explicit value definition in the parent element, the browser searches the DOM tree until it finds the corresponding attribute. If it cannot be found eventually, it will use the browser's default value, for example:

#myparent   
{   
    margin: 10px;   
    border: 1px solid #000;   
}   
/* use the same border as the parent */
#myparent p   
{   
    border: inherit;   
}

In practice, it is rarely necessary to use inherit. Many useful properties are automatically inherited, such as font, font size, color, etc.

Inheritis can be used with confidence. Although IE6 and IE7 don't support it, your design won't be broken because of this.
Property: initial;

Oh, a new CSS3 keyword! initial sets a property to its initial value - the browser's default defined value, for example:

body   
{   
    font-size: 0.5em;   
}   

/* reset paragraphs to 1em */
p   
{   
    font-size: initial;   
}

Is it useful? Maybe, after all you can't ensure that all browsers have the same default value.

Reasonable support - Chrome, Firefox, Safari and Opera 15. It doesn't work in IE, and I'm trying to think of the circumstances under which this would be a catastrophic problem.
Property: unset;

This is a slightly unusual one. When unset is used, it behaves as if an inheritable value existed and was inherited. If it doesn't find an inheritable value - for example, it's a non-inheritable property like box-shadow - it behaves as if it inherits the browser's default value.

Then again, I can't think of too many scenarios where unset is used, and currently there are very few that support it.
all: [ inherit | initial | unset ];

Finally, all is a property rather than a value. You can specify inherit, initial, or unset to affect all properties, such as resetting all CSS properties to browser defaults:

#mywidget   
{   
    all: initial;   
}

If you add third-party controls and want to avoid page style conflicts, This may be an optional global CSS field.

Unfortunately, at this time you cannot rely on strict consistency across browsers, however, it is still a useful feature.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About CSS Normalize's file configuration

Analysis of the use of RGB colors in CSS

The above is the detailed content of Analysis of inherit usage in CSS. For more information, please follow other related articles on the PHP Chinese website!