Your Electronic Books

6.
The Cascade, Specificity, and
Inheritance
The Ultimate CSS Reference 132
Table 5.6: Selector Specificity Results
Element Types
and
Pseudo-elements
Classes,
Attributes, and
Pseudo-classes
IDs Inline Style Selector
3 1 2 0 body#home div#warning
p.message
3 1 2 0 * body#home>div#warning
p.message
1 1 2 0 #home #warning
p.message
1 1 1 0 #warning p.message
1 0 1 0 #warning p
1 1 0 0 p.message
1 0 0 0 p
The results have been ordered according to specificity??”the highest are at the top,
and the lowest are at the bottom. As you can see, the top two selectors have exactly
the same specificity, despite the extra universal selector and combinator in one of
them. In this case, they tie for specificity and the one that appears last in the style
sheet will be the winner. If you look at the original style sheet source above, the red
color will be applied to the p element.
You can see from Table 5.6 that the selector p.message has a lower specificity than
the selector #warning p.


Pages:
179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203