Table of contents
Priority of common selectors (highest to lowest)
Foreword:
In the previous articles, we introduced a large number of selectors, so when a large number of selectors are used, they must have a priority order. Therefore, in this article, we will introduce the priority relationship between each selector in detail.
Priority of common selectors (highest to lowest)
1. Inline styles:
- The highest priority selector.
- By defining styles directly in the style attribute of the HTML element.
- sample code:
<div style="color: red;">This is a div with inline style.</div>
2. ID selectors (ID selectors):
- Select by adding the id attribute to the element and using the # symbol.
- sample code:
#myDiv
{
color: blue;
}
<div id="myDiv">This is a div with ID selector.</div>3. Class selectors (Class selectors):
- By adding the class attribute to the element and using the . symbol to select.
- sample code:
.myClass {
color: green;
}
<div class="myClass">This is a div with class selector.</div>4. Attribute selectors:
- Select by element's attributes.
- sample code:
input[type="text"]
{
border: 1px solid gray;
}
<input type="text" />
5. Pseudo-class selectors:
- Select by special state of the element.
- sample code:
<a href="#">This is a link.</a>
a:hover
{
text-decoration: underline;
}
6. Element selectors:
- Select by element's tag name.
- sample code:
<h1>This is a heading.</h1>
h1
{
font-size: 24px;
}
In a style sheet, if multiple selectors are applied to the same element, the styles of the higher-priority selectors will override the styles of the lower-priority selectors. Proper application of styles can be ensured through judicious use of selectors.
Selector weights:
The weight of a CSS selector is a value used to determine the priority of the selector, which determines which selector's style rules are applied when multiple selectors are applied to the same element.
CSS selector weights can be calculated according to the following rules:
1. Inline styles have a weight of 1000 . Inline styles are style rules defined directly in the `style` attribute of an element.
2. The ID selector has a weight of 100 . ID selectors are represented by `#`, such as `#myElement`.
3. Class selectors, attribute selectors, and pseudo-class selectors have a weight of 10. Class selectors are represented by `.`, attribute selectors are represented by `[]`, and pseudo-class selectors are represented by `:`.
4. Label selectors and pseudo-element selectors have a weight of 1. A tag selector is a selector expressed directly using HTML tag names, such as `div`, `p`, `a`. Pseudo-element selectors are represented by `::`, such as ::before, ::after.
When multiple selectors are applied to the same element, the CSS engine will compare the weights of the selectors and apply the style rules with higher weights first. For selectors with the same weight, style rules defined later will override style rules defined earlier.
It should be noted that the calculation of the weight is independent and is not affected by the specific position of the selector or the order of the style declaration. That is, no matter which stylesheet the selector is in, or the order of the style rules, the weight calculation is done according to the selector itself.
If an importance declaration `!important` is used in the weight calculation , then that style rule will have the highest priority regardless of the weights of other selectors.
In summary, selector weights provide a mechanism to manage and control the style priority of different selectors when applied to elements. Judicious use of selector weights ensures proper application and override of style rules.
Calculation case:
In CSS, multiple selectors can be combined using commas to form a compound selector. When using compound selectors, each selector calculates its weight individually, and the final weight is the sum of all selector weights.
For compound selectors (a, b, c), the weights of each selector will be calculated separately and then added to get the final weight.
For example, for the selector `div.container, .myClass, #myId`, we will calculate the weight as follows:
- For the selector `div.container`, it consists of a label selector and a class selector. Label selectors have a weight of 1, while class selectors have a weight of 10. Therefore, `div.container` has a weight of 1 + 10 = 11.
- For the selector `.myClass`, it has only one class selector with a weight of 10.
- For the selector `#myId`, it has only one ID selector with a weight of 100.
- Finally, add up the weights of the three selectors: 11 + 10 + 100 = 121.
Therefore, the selector combination `(div.container, .myClass, #myId)` has a weight of 121.
Some (a, b, c) will also directly record the number of current selectors, for example:
It would be good to directly compare the number of each bit when comparing, but in fact it is the same thing as we introduced, and after we write a selector, the compiler will also inform us of the weight of the current selector.
When applying style rules, the style rule of the selector with the highest weight will be applied to the element. If multiple selectors have the same highest weight, the style rule defined last will take precedence.
It should be noted that the weight calculation follows the rules of selector priority, among which ID selector has the highest weight, followed by class selector and attribute selector, and finally label selector. Therefore, when calculating the weight of a composite selector, it should be calculated from the weights of the individual selectors, and added together.
Summarize:
In this article, we introduced the priority and calculation method of the selector in detail. When we write large-scale front-end projects in the future, we will frequently adjust the priority of the selector to achieve the style we need, so we must master this chapter well.
If my content is helpful to you, please like, comment and bookmark . Creation is not easy, everyone's support is my motivation to persevere!
