17 Specificity Priority characteristics

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; }

pElement will be blue because the following rule is 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 at the elements p in div the color of the element is blue, like p the rules of the following elements, but the first selector of the feature 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.

• pThe feature is 1 (an HTML selector)
• div pThe feature is 2 (two HTML selectors)
• .treeFeature is 10 (1 class selector)
• div p.treeThe feature is 1+1+10=12, (two HTML selectors, one class selector)
• #baobabFeature is 100 (1 ID selector)
• body #content .alternative pFeature is 112 (two HTML selectors, one ID selector, one class selector)

According to the rules above, div p.tree the characteristics are div p higher and higher than the two of body #content .alternative p them.