CSS tutorial: Considerations for priority

If the same element has two or more conflicting CSS rules, the browser has some basic rules to decide which one is special and wins.
It may not be as important as others. In most cases, you do not need to worry about conflicts. However, large and complex CSS files or CSS files may contain conflicts.

If the selector is the same, the subsequent attributes will overwrite the previous attributes. For example:

P {color: red ;}
P {color: blue ;}


The element of the p element will be blue because it follows the following rules.

However, you cannot often use the same selector conflict to achieve the goal. When you use a nested selector, a reasonable conflict arises. For example:

Div p {color: red ;}
P {color: blue ;}

Maybe the color of the p element in the div element is blue, just like the rules of the p element, but the feature of the first selector is red. Basically, the more features a selector has, the style will be displayed when there is a style conflict.

The actual characteristics of a set of nested selectors can be calculated. Basically, the value of the ID selector is 100, the value of the class selector is 10, and the value of each html selector is 1. They can be used together to calculate the value of the feature.

P features 1 (an html selector)
Div p features 2 (two html selectors)
Tree Features 10 (one class selector)
Div p. tree Features 1 + 1 + 10 = 12 (two html selectors, one class selector)
# Baobab features 100 (1 ID selector)
Body # content. alternative p features 112 (two html selectors, one ID selector and one class selector)


According to the above rules, div p. tree features higher than div p, and body # content. alternative p is higher than both of them.