Example Analysis of CSS cascading style
This article shares with you the content of a sample analysis of CSS cascading styles. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.
CSS cascading
CSS cascading is a feature of browsers that handle conflicts. If multiple selectors are set in a property, only one selector will work at this time, and all other selectors will be removed from the cascading part.
Conditions for cascading
(1) same elements
(2) same attribute
(3) same priority
Cascading style conflicts
(1) conflict of citation mode
The citation methods of CSS include inline style, inline style, import style and link style. The priority order of the four styles is inline style > embedded style > import style > link style.
Example:
Body {
Background-color:pink
}
Priority
The effect picture is as follows:
(2) conflict of inheritance mode
There are some properties in CSS that inherit the value of this property with their own offspring when they are set, such as setting color, font size, font shape, alignment and so on in CSS. But with regard to box, positioning, layout and other properties, inheritance will not occur.
The inheritance conflict is to display the nearest parent element instead of all the parent elements
Example:
Body {
Color:pink
}
# father {
Color:red
}
# grandfather {
Color:blue
}
Inheritance conflict
Thank you for reading! This is the end of this article on "sample Analysis of CSS cascading style". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!
