Highly recommended: very good style sheet CSS tutorial (4)

css| Tutorial | style sheet

● specificity

This section describes the "specificity"that is used to determine style precedence. The "specificity" high priority applies to "specificity" and the number of elements in the selector selector and the attributes of the element.

How do you calculate the "specificity" value of a selector? involves three items:

1. Number of selector ID identifier attributes a

Note: A property selector for a matching ID cannot be counted as an ID, it can only be used as a property selector. For example, the specificity value of "id = value" is far less than "#_value"

2. Number of other attributes, pseudo classes in the selector B

Note: Class class selectors are one of the attribute selectors.

3. Number of identities, pseudo elements in the selector C

Exception: If a style rule is embedded within a model attribute, it does not have a selector, at which point its specificity is higher than any other selector.

These three values form a weighted value through the comma "Lian". Examples are as follows:

List	A	B	C	Specificity
#blurb {...}	1	1	0	1,0,0
. Message.big {...}	0	1	1	0,1,1
Div.message {...}	0	1	1	0,1,1
. Message {...}	0	1	0	0,1,0
div {...}	0	0	1	0,0,1
* { ... }	0	0	0	0,0,0
#id1 {...}	1	0	0	1,0,0
UL ul li.red {...}	0	1	3	0,1,3
li.red {...}	0	1	1	0,1,1
LI {...}	0	0	1	0,0,1
#z {...}	1	0	0	1,0,0
UL LI {...}	0	0	2	0,0,2
UL Ol+li {...}	0	0	3	0,0,3
H1 + *[rel=up]{...}	0	1	1	0,1,1
UL OL li.red {...}	0	1	3	0,1,3
LI.red.level {...}	0	2	1	0,2,1
#x34y {...}	1	0	0	1,0,0
H1 {(simple selector)}	0	0	1	0,0,1
P EM {(contextual selector)}	0	0	2	0,0,2
. Grape {(class selector)}	0	1	0	0,1,0
p.bright {(Element/class selector combo)}	0	1	1	0,1,1
P.bright Em.dark {(contextual element/class)}	0	2	2	0,2,2
#greg {(ID selector)}	1	0	0	1,0,0
*{ ... }	0	0	0	0,0,0
Li{...}	0	0	1	0,0,1
UL li{...}	0	0	2	0,0,2
UL ol+li{...}	0	0	3	0,0,3
[Id=value] { ... }	0	1	0	0,1,0
H1 + *[rel=up] {...}	0	1	1	0,1,1
UL ol Li.class {...}	0	1	3	0,1,3
LI.C1.C2 {...}	0	2	1	0,2,1
#value {...}	1	0	0	1,0,0
DIV.A div.b div.c div.d div.e div.f div.g DIV.h div.i div.j div.k {color:red;}	0	11	11	0,b,b

Note: IDs always take precedence over attributes, and attributes always take precedence over tag names. So a selector with an ID identifier always takes precedence over the styles defined by other classes.

Order: Later in the home

In the final section, the precedence is determined in order, and the end rules are defined over any previous definition, assuming two rules:

p {color:red; Background:yellow}
p {Color:green}

The paragraph displays green text, and the background color is yellow, because the rule one set color will be replaced by rule two, and the background color does not exist style conflicts, so the background color defined in rule one is still adopted,

★ Temporary Quiz:

Take a look at the following code:

p.red {color:red}
P.green {Color:green}
P.blue {Color:blue}

...

<p class= "Red Green Blue" >sample text.</p>
<p class= "Green Blue Red" >sample text.</p>
<p class= "Blue Red Green" >sample text.</p>