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

Source: Internet
Author: User
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>



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.