Home > Article > Web Front-end > How to understand CSS cascading styles
CSS cascading is a feature of browser conflict handling. Among CSS cascading style conflicts, there are reference mode conflicts, inheritance mode conflicts, and specified style conflicts. When there is a conflict between the specified style and inherited style debugging, the specified style conflict shall prevail.
CSS has three major features: inheritance, priority and cascading. What I will introduce today is the cascading nature of the three major features of CSS, which has certain reference value. I hope it will be helpful to everyone
[Recommended course: CSS tutorial】
CSS cascading
CSS cascading is browser processing A feature of conflict is that if multiple selectors are set in an attribute, only one selector will take effect at this time, and the other selectors will be removed by the cascading part.
Conditions for cascading
(1) The elements are the same
(2) The attributes are the same
(3) The priorities are the same
Cascading style conflicts
(1) Reference method conflict
CSS reference methods include inline styles, Inline style, imported style, link style, the order of priority of the four is inline style > inline style > imported style > link style
Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" src="style.css">
<style>
body{
background-color: pink;
}
</style>
<body>
<h1 style="background-color: red">优先级</h1>
</body>
</html>Effect The picture is as follows:
(2) Inheritance mode conflict
There are some properties in CSS when setting them to yourself The attribute value will be inherited by its descendants. For example, the color, font size, font shape, alignment, etc. set in CSS will be inherited. However, inheritance will not occur regarding attributes such as box, positioning, layout, etc.
The conflict of inheritance methods is to display the parent element closest to itself instead of all parent elements
Example:
<style type="text/css">
body{
color: pink;
}
#father{
color: red;
}
#grandfather{
color: blue;
}
</style>
</head>
<body>
<div id="grandfather">
<div id="father">
<div>
<h1>继承冲突</h1>
</div>
</div>
</div> The rendering is as follows:
(3) Specify style conflict
Sometimes we specify Conflicts may occur due to different weights. It should also be noted here that only when the weights are the same, the "last come first" principle will be used
<style type="text/css">
body{
color:black;
}
.father{
color:yellow;
}
#son{
color:green;
}
</style>
</head>
<body>
<div id="son" class="father">
<h1>继承冲突</h1>
</div>
</body>The effect diagram is as follows:
The above is the detailed content of How to understand CSS cascading styles. For more information, please follow other related articles on the PHP Chinese website!