CSS Specificity--css features, weights, priorities---CSS specificity rules,

CSS specificity

as mentioned above, CSS styles follow an order of Specificity and point values to determine ( nice article

• elements-1 points

• identifiers-100 points< /span>

• inline Styling-1000 points

when in doubt, get more specific with your style Declarations ( declaration). You can also use the  ! Important  declaration for Debugging ( Debug) purposes if needed.

Read more about CSS specificity:

• HTML Dog on specificity

• Smashing Magazine on CSS specificity

Chinese:

CSS a lot of people have asked me, set after the CSS has no effect, style invalidation, style conflicts,
This problem usually occurs in the novice, in many cases is ignored the CSS weight specificity,
I try to summarize some rules, algorithms and examples about specificity
Hope to have some help to the new!
Sun Jia (http://www.sjweb.cn/looks like the link is not available)

About CSS Specificity
CSS specificity features or extraordinary, it is a measure of the precedence of CSS values of a standard, since as a standard, there is a set of relevant rules and calculations, specificity with a four-bit digital string (CSS2 is three bits) to represent, more like four levels, Values from left to right, the largest on the left, a level greater than a level, there is no system between digits, the level can not be exceeded.

When multiple selectors are applied to the same element then the specificity value is higher and the final priority is obtained.

Selector specificity Value List

Selectors Selection character	Syntax Samples Grammar	Ensample Example	Specificity Characteristics
Wildcard selector (Universal Selector)	*	*.div {width:560px;}	0,0,0,0
Type selector (type selectors)	E1	td {FONT-SIZE:12PX;}	0,0,0,1
Pseudo-class selector (Pseudo-classes selectors)	E1:link	a:link {font-size:12px;}	0,0,1,0
Property selector (Attribute selectors)	E1[ATTR]	H[title] {color:blue;}	0,0,1,0
ID selector (ID selectors)	#sID	#sj {font-size:12px;}	0,1,0,0
Class selector (selectors)	E1.classname	. Sjweb{color:blue;}	0,0,1,0
Sub-object selector (child selectors)	E1 > E2	Body > P {color:blue;}	E1+e2
Adjacent selectors (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
Include selector (descendant selectors)	E1 E2	Table td {Color:blue;}	E1+e2

Rules:
1. The in-line style priority specificity value is 1,0,0,0, which is higher than the external definition.
such as: <div style= "color:red" >sjweb</div>
External definition refers to rules defined by <link> or <style> tags;
The 2.!important declaration has the highest specificity value;
3.Specificity values in the same case, in the CSS code in the order in which they appear, the latter CSS style;
4. The continuation of the resulting style has no specificity calculation, it is below all other rules (such as the global selector * defined rules).

Algorithm:
When multiple selectors are encountered at the same time
The specificity value obtained by the selector is added to the bits,
{There is no binary between digits such as: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0, 0, 1, 0}
We get the final specificity,
Then compare the trade-offs with a bitwise comparison of the left-to-right order.

Example Analysis:
1.div {font-size:12px;}
Analysis:
1 element {div},specificity value is 0,0,0,1

2.body div P{color:green;}
Analysis:
3 elements {Body div p},specificity value is 0,0,0,3

3.div. sjweb{font-size:12px;}
Analysis:
1 elements {div},specificity value is 0,0,0,1
1 class Selector {. Sjweb},specificity value is 0,0,1, 0
Final: specificity value is 0,0,1,1

4.Div # sjweb {font-size:12px;}
Analysis:
1 elements {div},specificity value is 0,0,0,1
1 ID Selector {sjweb},specificity value is 0,1,0, 0
Final: specificity value is 0,1,0,1


5.html > Body div [id= "totals"] ul li > P {color:red;}
Analysis:
6 Elements {HTML Body div ul li P} specificity value is 0,0,0,6
1 attribute Selectors {[id= "totals"]} specificity value is 0,0,1,0
2 additional selectors {> >} specificity value is 0,0,0,0
Final: specificity value is 0,0,1,6

CSS Specificity--css features, weights, priorities---CSS specificity rules,