Priority of css selector
When using different selectors to select the same element and set the style,
In this way, the style will conflict. Which selector-defined style is ultimately used is determined by the priority (weight) of the selector, and the higher priority is displayed first.
Priority rule (weight value)
- Inline style: 1000
- id selector: 100
- Class and pseudo-class selector: 10
- Element selector: 1
- Wildcard selector: 0
- Inherited style: no priority
When the selector contains multiple selectors, we need to add the priority of our selectors together for calculation and comparison, but note that the priority of the selector will not exceed his maximum order of magnitude, if the priority of the selector Same, use the back style
Note : The priority of the union selector is calculated separately
You can add one after the style ! important , the style will get the highest priority at this time, and will take precedence over all styles and even surpass inline styles, but try to avoid using them in development
Style inheritance
- Using inheritance, you can set some basic styles to ancestor elements, so that all descendants will automatically inherit these styles
- Not all styles will be inherited by child elements, such as: background color (background-related styles will not be inherited, border-related styles, positioning-related)
Order of pseudo-classes
There are four pseudo-classes involving a:
- ：link （L）
- ：visited (V)
- ：hover (H)
- ：active (A)
The priority of these four selectors is the same, but there will be a writing order (LOVE HATE principle)