CSS Tutorial: an example of priority issues

If the same element has two or more conflicting CSS rules, the browser has some basic rules to decide which one is very special and wins.

It may not be as important as others, and most cases you don't need to worry about conflict, but large and complex CSS files, or a lot of CSS files, can create conflicts.

In the case of a selector, the previous attribute will be overwritten. Like what:

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

The elements of the P element will be blue because the following rules are followed.

However, you cannot often use the same selector conflict to achieve the goal, when you use nested selectors, a reasonable conflict comes. Like what:

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

Maybe you look. The color of the P element inside the div element is blue, just like the rule for the P element at the back, but the first selector is red. Basically, the more features a selector has, the style is displayed when the style conflicts.

The actual characteristics of a set of nested selectors can be computed. Basically, the value of using the ID selector is 100, the value of the class selector is 10, and the value of each HTML selector is 1. They add up to calculate the value of the attribute.

The attribute of P is 1 (an HTML selector)
The attributes of Div P are 2 (two HTML selectors)
. Tree features 10 (1 class selectors)
The character of the Div P.tree is 1+1+10=12, (two HTML selectors, one class selector)
#baobab的特性是100 (1 ID selectors)
The body #content. Alternative p features 112 (two HTML selectors, an ID selector, a class selector) according to the above rules, Div p.tree is higher than Div p, body #content. Alternative P is taller than two of them.