CSS SpecificityCSS properties, weight, priority-CSS specificity rules,_html/css_WEB-ITnose

CSS Specificity

As mentioned above, CSS styles follow an order of specificity and point values ​​to determine when styles override one another or take precedence (Priority). Nettuts recently had a nice article in which the point values ​​for css were explained. They are like so:

Elements - 1 points

Classes - 10 points

Identifiers - 100 points

Inline Styling - 1000 points

Why in doubt, get more specific with your style declarations(declaration). You can also use the !important declaration for debugging(debugging) purposes if needed.

Read more about css specificity:

HTML Dog on Specificity

Smashing Magazine on CSS Specificity

中文:

Many people have asked me about CSS. After setting the CSS, it has no effect, the style is invalid, and the style conflicts.
This kind of problem usually happens to novices. In many cases, CSS is ignored. The weight specificity in
I try to summarize some rules, algorithms and examples about specificity
I hope it will be helpful to newcomers~!
Author: Sun Jia (http://www.sjweb.cn/ The link seems to be unavailable)

About CSS specificity
CSS’s specificity characteristics or extraordinary characteristics, it is a measure of a measure A standard for CSS value priority. Since it is a standard, it has a set of relevant determination regulations and calculation methods. Specificity is represented by a four-digit number string (CSS2 is three digits), which is more like four levels, with values ​​from left to right. To the right, the one on the left is the largest, one level is greater than one level, there is no base between the digits, and the levels cannot be surpassed.

When multiple selectors are applied to the same element, the one with the highest Specificity value will eventually get priority.

Selector Specificity value list

Type Selectors h[title] {color:blue;}

Selectors

Selectors 选择符	Syntax Samples 语法	ensample 示例	Specificity 特性
通配选择符(Universal Selector)	*	*.div { width:560px;}	0,0,0,0
类型选择符(Type Selectors)	E1	td { font-size:12px;}	0,0,0,1
伪类选择符(Pseudo-classes Selectors)	E1:link	a:link { font-size:12px;}	0,0,1,0
属性选择符(Attribute Selectors)	E1[attr]	h[title] {color:blue;}	0,0,1,0
ID选择符(ID Selectors)	#sID	#sj{ font-size:12px;}	0,1,0,0
类选择符(Class Selectors)	E1.className	.sjweb{color:blue;}	0,0,1,0
子对象选择符(Child Selectors)	E1 > E2	body > p {color:blue;}	E1 E2
相邻选择符(Adjacent Sibling Selectors)	E1 E2	div p {color:blue;}	E1 E2
选择符分组(Grouping)	E1,E2,E3	.td1,a,body {color:blue;}	E1 E2 E3
包含选择符(Descendant Selectors)	E1 E2	table td {color:blue;}	E1 E2

Selectors

Syntax Samples Syntax

ensampleExample

SpecificityCharacteristics

Universal Selector

*

*.div { width:560px;}

0,0,0,0

E1

td { font-size:12px;}

0,0,0,1

Pseudo-classes Selectors

E1:link

a:link { font-size:12px;}

0,0,1,0

Attribute Selectors

E1[attr]

0,0,1,0

ID Selectors

#sID

#sj{ font-size:12px;}

0,1,0,0

Class Selectors

E1.className

.sjweb{color:blue;}

0,0,1,0

Child Selectors

E1 > E2

body > p {color:blue;}

E1 E2

Adjacent Sibling Selectors

E1 E2

div p {color:blue;}

E1 E2

Selector Grouping (Grouping)

E1,E2,E3

.td1,a,body {color:blue;}

E1 E2 E3

Contains selectors (Descendant Selectors)

E1 E2

table td {color:blue;}

E1 E2

Rules:
1. The inline style priority Specificity value is 1,0,0,0, which is higher than the external definition.
For example:

sjweb

External definition refers to the rules defined via the or