As style sheets are created with more and more complexity, a tag's style will be affected more and more, either from surrounding tags or itself. Let's take a look at the priority of CSS styles from these two aspects.
CSS inheritance
Inheritance of CSS means that those CSS properties applied to a tag are passed on to its child tags. Look at the following HTML structure:
|
1
2
3
|
<div>
<p></p>
</div>
|
If <div> has attribute color: red, this attribute will be inherited by <p>, ie <p> also has attribute color: red.
It can be seen from the above that when the web page is more complex and the HTML structure is deeply nested, the style of a tag will be deeply affected by the style of its ancestor tags. The rules affected are:
CSS precedence rule 1: The most recent ancestor style takes precedence over other ancestor styles.
Example 1:
|
1
2
3
4
5
6
|
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style=
"color: red"
>
<div style=
"color: blue"
>
<div
class
=
"son"
></div>
</div>
</div>
|
If we call an attribute that a tag inherits from an ancestor but does not have an "ancestral style", then a "direct style" is an attribute directly owned by a tag. There are the following rules:
CSS precedence rule 2: "direct styles" take precedence over "ancestor styles".
Example 2:
|
1
2
3
4
|
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style=
"color: red"
>
<div
class
=
"son"
style=
"color: blue"
></div>
</div>
|
selector priority
Let's talk about the 7 basic CSS selectors:
ID selectors, such as #id{}
class selectors, such as .class{}
attribute selectors, such as a[href="www.F44.com"]{}
pseudo-class selectors, such as :hover{}
pseudo-element selectors, such as ::before{}
tag selectors, such as span{}
wildcard selectors, such as *{}
CSS precedence rule 3: precedence relationship: inline styles > ID selectors > class selectors = attribute selectors = pseudo-class selectors > tag selectors = pseudo-element selectors
Example 3:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// HTML
<div
class
=
"content-class"
id=
"content-id"
style=
"color: black"
></div>
// CSS
#content-id {
color: red;
}
.content-
class
{
color: blue;
}
div {
color: grey;
}
|
The final color of <div> is black, because inline styles take precedence over other selectors
CSS precedence rule 4: Count the number of ID selectors in the selector (a), calculate the sum of the number of class selectors, attribute selectors and pseudo-class selectors in the selector (b), calculate the label selection in the selector The sum of the number of selectors and pseudo-element selectors (c). Compare the size in the order of a, b, and c, the larger one has the higher priority, and the next one is equal if it is equal. If a, b, and c in the last two selectors are all equal, it is judged according to the "nearest principle".
Example 4:
|
1
2
3
4
5
6
7
8
9
10
11
|
<div id=
"con-id"
>
<span
class
=
"con-span"
></span>
</div>
// CSS
#con-id span {
color: red;
}
div .con-span {
color: blue;
}
|
As can be seen from rule 4, the color of <span> is red.
What happens if the styles in the external style sheet and the internal style sheet conflict? This has to do with where the style sheet is located in the HTML file. The lower the position where the style is applied, the higher the priority, in fact, this can still be explained by rule 4.
Example 5:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<link rel=
"stylesheet"
type=
"text/css"
href=
"style-link.css"
>
<style type=
"text/css"
>
@import url(style-import.css);
div {
background: blue;
}
</style>
<div></div>
// style-link.css
div {
background: lime;
}
// style-import.css
div {
background: grey;
}
|
In order, the inner styles are at the bottom and are referenced last, so the background color of the <div> is blue.
In the above code, the `@import` statement must appear before the internal style, otherwise the file import will be invalid. Use this when you must, must ensure that a particular property is to be displayed.
CSS Precedence Rule 5: Properties with `!important` inserted after the property have the highest priority. If `!important` is inserted at the same time, then rules 3 and 4 are used to judge the priority.
Example 6:
|
1
2
3
4
5
6
7
8
9
10
11
|
<div
class
=
"father"
>
<p
class
=
"son"
></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
|
虽然 .father .son 拥有更高的权值，但选择器 p 中的 background 属性被插入了 !important，所以 <p> 的 background 为 red。
错误的说法
ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。这种说法是有问题的。比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。错误的原因是：选择器的权值不能进位。。这个我们可以自己尝试一下。11 个类选择器组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过 100，所以最终应用后者样式。