Css priority notes and css priority notes

Css priority notes and css priority notes

From fantastic css

1.css priorities we use the selector's "special degree ":

• The description contribution (for example, div, ul) of each element is 0, 0, 1
• Each class, pseudo class (such as hover), or attribute descriptor contributes 0, 0, 1, 0
• Each ID descriptor contributes 0, 1, 0, 0

2. The number is larger on the left. It is generally considered as follows:

3. You can selectively overwrite short attributes in css, as shown in figure

Border: 3px dotted black; border-left-color: red;

 

You can achieve a black color of three sides. Red dot border on the left

However, as shown below, no three sides are black. Red dot border on the left.

Border-left-color: red; border: 3px dotted black;

This is because the subsequent style will overwrite the previous style (for the same element ),

Therefore, when this type of selective overwrite is used, make sure that the attribute used to overwrite the shorthand property appears after the shorthand property.