内联样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器 > 继承样式 > 浏览器默认样式
When there are selectors of the same type, different formulas are given different weights and calculated by formulas.
Examples:
- Weight for inline style = 1000.
- The weight of the style in the ID selector = 100.
- The weight of the style in the class selector, attribute selector, and pseudo-class selector = 10.
- The weight of the style in the tag selector = 1.
- The universal selector can be ignored directly.
The weight value of the selector is calculated by the formula n1 * 100 + n2 * 10 + n3 * c.
Note :
- This calculation model is only for understanding the style priority relationship and cannot represent the real calculation method in the browser
- The calculation of the weight value cannot be overstepped. For example, selector A has only one ID selector and the weight is 100; selector B uses 20 class selectors and the weight value is 200. At this time, if the styles corresponding to the two selectors act on the same DOM node, then selector A will take effect because its selector level is higher.
- If the two selectors A and B are selectors of the same level, and the final calculated weight value is also the same, then whoever is behind these two selectors has higher priority.
