When defining CSS styles, it is often the case that two or more style rules are applied to the same element. At this time, CSS will give priority to the style with the highest weight according to the weight of the style rule. CSS priority refers to the weight of CSS style rules. In web page production, CSS specifies different weights for each basic selector, which is convenient for us to add style codes. In order to understand CSS priority in depth, we analyze it through a sample code. The CSS style code is as follows:
p{
color:red;} /*标签样式*/
.blue{
color:green;} /*class样式*/
theader{
color:blue;} /*id样式*/
The HTML structure corresponding to the CSS style code is:
<p class="blue" id="header">
帮帮我，我到底显示什么颜色?
</p>
In the above sample code, different selectors are used to set the text color of the same element, and the browser will parse the CSS style according to the priority rules of the CSS selector. In order to facilitate the judgment of the priority of elements, CSS assigns a weight to each basic selector, and we can match weights for these basic selectors by means of virtual values. Suppose the label selector has a weight of 1, the class selector has a weight of 10, and the id selector has a weight of l00. This way the id selector "#header" has maximum priority, so the text is shown in blue.
For a compound selector composed of multiple basic selectors (except the union selector), its weight can be understood as the superposition of the weights of these basic selectors. For example, the CSS code below.
p strong{
color:black} /*权重为：1+1*/
strong.blue{
color:green;} /*权重为：1+10*/
.father strong{
color:yellow} /*权重为：10+1*/
p.father strong{
color:orange;} /*权重为：1+10+1*/
p.father .blue{
color:gold;} /*权重为：1+10+10*/
theader strong{
color:pink;} /*权重为：100+1*/
#header strong.blue{color:red;} /*权重为：100+1+10*/
The corresponding HTML structure is:
<p class="father" id="header">
<strong class="blue">文本的颜色</strong>
</p>
At this time, the "#header strong.blue" selector in the CsS code has the highest weight, and the text color will be displayed as red. In addition, we also need to pay attention to some special cases when considering weights.
(1) The weight of the inherited style is 0
In the nested structure, regardless of the weight of the parent element's style, when it is inherited by the child element, its weight is 0, which means that the style defined by the child element will override the inherited style. For example, the CSS style code below.
strong{
color:red;}
#header{color:green;}
The HTML structure corresponding to the CSS style code is as follows:
<p id="header" class="blue">
<strong>继承样式不如自己定义的权重大</strong>
</p>
In the above code, although "#header" has a weight of 100, it is 0 when inherited by the tag. The weight of the "strong" selector is only 1, but it is greater than the weight of the inherited style, so the text in the page is displayed in red.
(2) Inline styles take precedence
Elements to which the style attribute is applied have a very high inline style weight. Converted to a numerical value, we can understand that it is much greater than 100. So inline styles have higher priority than the selectors mentioned above.
(3) When the weights are the same, the priority of CSS follows the principle of proximity
That is to say, the style close to the element has the highest priority, or in other words, the style at the bottom has the highest priority according to the code arrangement order. For example, the following is an example code for externally defined CSS.
/*CSS文档,文件名为style_red.css*/
#header{color:red;} /*外部样式*/
The corresponding HTML structure code is as follows:
<title>CSS优先级</title>
<link rel="stylesheet"href="style_red.css"type="text/css"/> /*引入外部
定义的CSS代码*/
<style type="text/css">
#header{color:gray;}
</style>
</head>
<body>
/*内嵌式样式*/
<p id="header">权重相同时，就近优先</p>
</body>
In the sample code above, the second line of code introduces the CSS style through the external link, and the style sets the text style to be displayed in red. Lines 3 to 5 of the code introduce the CSS style inline, and the style sets the text style to be displayed in gray.
After the above page is parsed, the paragraph text will be grayed out, i.e. the inline styles take precedence. This is because inline styles are closer to the HTML. element than outlink styles. By the same token, if two external style sheets are referenced at the same time, the lower style sheet has greater priority. If at this point you change the inline style to:
p{
color:gray;} /*内嵌式样式*/
At this time, the weight of the external link id selector and the embedded label selector are different, and the weight of "#header" is higher, and the text will be displayed in red defined by the external style.
(4) CSS defines the "limportant" command, which will be given the greatest priority
When CSS defines the "limportant" command, the weight and position relationship will no longer be considered, and the tags using "limportant" will have the greatest priority. For example, the sample code below.
#header{color:red!important;}
Paragraph text with this style applied is displayed in red because the style of the "limportant" command has the greatest priority. It should be noted that the "limportant" command must be placed between the attribute value and the semicolon, otherwise it will be invalid.
The weight of a composite selector is the superposition of the weights of the base selectors that make it up, but this superposition is not a simple sum of numbers. The following is a specific example through a case, as shown in Example 1.
Example 1 examplel1.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>复合选择器权重的叠加</title>
<style type="text/css">
.inner{
text-decoration:line-through;}/*类选择器定义删除线，权重为10*/
div div div div div div div div div div div{
text-decoration:underline;}
/*后代选择器定义下画线，权重为11个1的叠加*/
</style>
</head>
<body>
<div>
<div><div><div><div><div><div><div><div><div>
<div class="inner">文本的样式</div>
</div></div></div></div></div></div></div></div></div>
</div>
</body>
</html>
Example 1 used a total of 11 pairs
Run Example 1, the effect is as follows.
In the image above, the text is not underlined as expected, but instead shows a strikethrough defined by the class selector ".inner". It can be seen that no matter how many tags are added in the outer layer, no matter how many weights the compound selector has