The weighting relationship of CSS selectors

Tag: Class style effective width otherwise element selector wildcard property cannot

Keep in mind the weight relationship of CSS selectors and avoid the appearance of CSS styles not being effective in the page ~

–	inline	ID	class	Elements
–	A	B	C	D
Embedded	1	0	0	0
Id	0	1	0	0
class, attributes, Pseudo-classes	0	0	1	0
Elements, pseudo-elements	0	0	0	1
Wildcard characters *	0
!improtant (write in declaration, change the weight value)	Highest

• A set of values will only be 1 if the CSS is written into the style property, otherwise 0;
• The B-group value is determined by the ID selector, how many ID selectors, and this array value is accumulated;
• The value of the C group depends on the class selector, how many class selectors there are, and the values of this array are incremented;
• The value of the D group is determined by the element selector, how many element selectors are available, and the accumulation of the array values.

Summarize:

• weights are not rounded;
• The embedded weight level is the highest, the inline is not entitled to re-relations, only the order of precedence;
• Weights are at the same time, before being overwritten.

Weighting relationships for CSS selectors