As the style sheets you create become increasingly complex, the style of a tag will be affected by more and more factors. This influence may come from surrounding tags, or from the tag itself. Below, we will look at CSS style priority from these two aspects.
CSS Inheritance
The inheritance feature of CSS refers to CSS properties applied to one tag being passed down to its child tags. Look at the following HTML structure:
<div>
<p></p>
</div>
If<div>has a propertycolor: red, then this property will be<p>inherited, that is,<p>also has the propertycolor: red。
As can be seen from the above, when a web page is relatively complex and the HTML structure is deeply nested, the style of a tag will be greatly affected by the styles of its ancestor tags. The rule of influence is:
CSS Priority Rule 1:The nearest ancestor's style has higher priority than other ancestors' styles.
Example 1:
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div style="color: blue">
<div class="son"></div>
</div>
</div>
If we call the properties that a tag inherits from its ancestors but does not have on its own "ancestor styles," then "direct styles" are properties that a tag directly owns. There is also the following rule:
CSS Priority Rule 2:"Direct styles" have higher priority than "ancestor styles."
Example 2:
<!-- 类名为 son 的 div 的 color 为 blue -->
<div style="color: red">
<div class="son" style="color: blue"></div>
</div>
Selector Priority
Above we discussed the properties a tag inherits from ancestors; now let's discuss the properties that a tag has on its own. Before discussing CSS priority, let's first talk about the 7 basic CSS selectors:
ID selector, e.g., #id{}
Class selector, e.g., .class{}
Attribute selector, e.g., a[href="segmentfault.com.html"]{}
Pseudo-class selector, e.g., :hover{}
Pseudo-element selector, e.g., ::before{}
Tag selector, e.g., span{}
Universal selector, e.g., *{}
CSS Priority Rule 3:Priority relationship: inline styles > ID selectors > class selectors = attribute selectors = pseudo-class selectors > tag selectors = pseudo-element selectors
Example 3:
// 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 is black, because inline styles have higher priority than other selectors.
All CSS selectors are composed of the above 7 basic selectors or their combinations. There are 3 ways to combine them:
Descendant selector: .father .child{}
Child selector: .father > .child{}
Adjacent sibling selector: .bro1 + .bro2{}
When a tag is selected by multiple selectors at the same time, we need to determine the priority of these selectors. We have the following rule:
CSS Priority Rule 4:Count the number of ID selectors in the selector (a), count the sum of the number of class selectors, attribute selectors, and pseudo-class selectors in the selector (b), and count the sum of the number of tag selectors and pseudo-element selectors in the selector (c). Compare the values in the order of a, b, and c; the larger one has higher priority, and if equal, compare the next. If two selectors have equal a, b, and c at the end, then judge according to the "nearest principle."
Example 4:
// HTML
<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 an external style sheet and an internal style sheet conflict? This is related to the position of the style sheet in the HTML file. The lower the position where the style is applied, the higher its priority; in fact, this can still be explained by Rule 4.
Example 5:
// HTML
<link rel="stylesheet" type="text/css" href="style-link.css.html">
<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 terms of order, the internal style is at the bottom and is referenced last, so the background color of <div> is blue.
In the above code,@importthe statement must appear before the internal style, otherwise the file import is invalid. Of course, it is not recommended to use@importCSS Import MethodsCSS Import Methods。
CSS also provides a way to completely ignore the above rules. When you definitely and must ensure that a specific property is displayed, you can use this technique.
CSS Priority Rule 5:If a property is followed by!importantthen the property has the highest priority. If both are inserted!important, then use Rules 3 and 4 to determine priority.
Example 6:
// HTML
<div class="father">
<p class="son"></p>
</div>
// CSS
p {
background: red !important;
}
.father .son {
background: blue;
}
Although .father .son has a higher weight, the background property in selector p is inserted with !important, so the background of <p> is red.
Incorrect Statements
In the process of learning CSS, you may have heard of a "selector weighted value" saying: the weight of an ID selector is 100, a class selector is 10, a tag selector is 1, and then add them up and compare. Although this way of understanding is easy to remember on the surface, it is actually wrong.
For example, there are two selectors:
.class1.class2.class3 ... （共11个类） #id
If you calculate using the "addition" method, you would think the former has a weight of 110, the latter 100, and the former should win. But in reality, the browser chooses the latter's style (the #id one).
Why? Because CSS does not treat selector weights as "decimal addition." The priority comparison in CSS is essentially a hierarchical comparison, which can be understood as a four-digit comparison:
- Inline styles: 1,0,0,0
- ID selectors: 0,1,0,0
- Class selectors, attribute selectors, pseudo-classes: 0,0,1,0
- Tag selectors, pseudo-elements: 0,0,0,1
The browser compares them from left to right, not by adding. No matter how many class selectors you have, they cannot outmatch an ID selector.
So, stop using the "100+10+1" method. Weight is not an addition game; it is a structural hierarchical comparison!