Home > Developer > Web Develop

CSS selectors and their precedence

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

A: Some ordinary selectors 
<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "UTF-8">    <title></title>    <Linkhref= "Mycss.css"type= "Text/css"rel= "stylesheet"></Head><Body><!--Derived selector instance -<a>This is a div outside the style of a tag</a><Div>    <a>This is the style of a div inside a tag</a>    <H2>CSS Basic syntax</H2></Div><!--ID selector and derived selector instance -<ahref= "https://www.baidu.com/" >Baidu does not change color</a><DivID= "divID">    <ahref= "https://www.baidu.com/" >Baidu Discoloration</a></Div><BR/><!--class Selector -<DivID= "Divclass"class= "DIVCLSS">Div class Selector Instance</Div><BR/><!--Property Selector -<Ptitle= "T1">Property Selector</P><!--as the body specifies the color -<Ptitle= "T2">Property Selector</P></Body></HTML>

h2,a,h1{Color:Red;}Body{Color:Yellow;}Div a{Color:Blue;}#divid a{Color:darkred;}. DIVCLSS{Color:Chartreuse;}[title = T1]{Color:mediumvioletred;}/*This is going to be in order.*/Div a:link{Color:Blue;}Div a:visited{Color:Blue;}Div a:hover{Color:Red;}Div a:active{Color:Yellow;}/  *The priority of the ID selector is higher than the type selector *  /

Effect:

Second: Priority instances 
<!DOCTYPE HTML><HTML><HeadLang= "en">    <MetaCharSet= "UTF-8">    <title></title>    <style>        /*Tag Selector*/Div{Color:Blue} /*Green*/        /*class Selector*/. A1{Color:Yellow} /*Yellow*/        /*class derivation Selector*/. A1 Div{Color:Purple} /*Purple*/        /*ID Selector*/#id1{Color:Cyan} /*Cyan*/#id2{Color:Cyan} /*Cyan*/#id3{Color:Cyan} /*Cyan*/        /*ID Derivation Selector*/#id2 Div{Color:Red} /*Red*/    </style></Head><Body><DivID= "Id1"class= "A1">I'm cyan. The ID selector takes precedence over the class selector</Div><Divclass= "A1">    <Divclass= "A1">I'm purple. Class-derived selectors have precedence over all class selectors</Div>    <DivID= "Id2">I'm cyan. ID Selector precedence over class-derived selectors<DivID= "ID3">I'm red, not cyan. ID-derived selectors with higher precedence than ID selectors</Div>    </Div></Div></Body></HTML>

：

3: Priority judgment of more professional points

(Original blog address: http://www.cnblogs.com/aaronjs/p/3156809.html#_h2_1)

Calculates the priority of the specified selector: re-recognize the weights of the CSS

    1. The weighted value of the wildcard selector 0,0,0,0
    2. The weight value of the label is 0,0,0,1
    3. The weight value of the class is 0,0,1,0
    4. The weight value of the property selection is 0,0,1,1 0,0,1,0
    5. The weights for pseudo-class selection are 0,0,1,0
    6. The weight value of the pseudo-object selection is 0,0,0,1
    7. The weight of the ID is 0,1,0,0
    8. The important weights are the highest 1,0,0,0

The rules used are also very simple, that is, the weights of the selectors are added together, the big priority, and if the weights are the same, then the precedence is defined . Although it is very simple, but if you do not notice when writing, it is easy to lead to a duplicate CSS definition, code redundancy.

From the above we can draw two key factors:

    1. The size of the weights is related to the type and number of selectors
    2. The precedence of a style is related to the order in which the styles are defined

An article 256 class name selectors kill an ID selector instance page

Http://www.zhangxinxu.com/study/201208/256-class-fire-an-id.html

The answer is: all class names (classes) are stored in a 8- byte string . The maximum value that 8 bytes can hold is 255. When 256 classes are present, it is bound to cross the edge and overflow to the ID area.

Summarize:

Compare the number of the same level, the number of high priority, if the same is compared to the next level of the number of levels of priority, we should have been very clear, is:

Important > Inline > ID > class > tags | Pseudo Class | Property selection > Pseudo-object > inheritance > Wildcard wildcard > Inheritance

This also explains why the definition of 11 tags is less than the definition of 1 classes, 1 classes plus 11 tags will be less than the weight of 2 classes.

Selector type

The following are some of the possible references:

    • A wildcard selector

    • Type Selector

    • ID Selector

    • Class Selector

    • Include selector

    • Child element Selector

    • Adjacent sibling selector

    • Property Selector

CSS1-CSS3 offers a very rich selection of selectors, but because some selectors are not supported by individual browsers, many selectors are rarely used in actual CSS development

About the efficiency of CSS execution:

    1. The style system starts the matching rule from the rightmost selector to the left. As long as there are other selectors on the left side of the current selector, the style system will continue to move to the left until it finds the element that matches the rule, or exits because of a mismatch.
    2. If you really care about the performance of the page, don't use the CSS3 selector. In fact, in all browsers, rendering with class and ID is more interesting than using siblings, descendant selectors, sub-selectors (sibling, descendant, and child selectors) to improve page performance.

Steve Souders, Google's senior web development engineer, made a sort of high-to-low efficiency for CSS selectors:

1.id selector (#myid) 2. Class selector (. myclassname) 3. Tag Selector (div,h1,p) 4. Adjacent selector (h1+p) 5. Sub-selector (UL < li) 6. Descendant selector (Li a) 7. Wildcard Selector (* ) 8. Property selector (a[rel= "external"]) 9. Pseudo class selector (a:hover,li:nth-child)

The ID selector is the most efficient of the above nine selectors, while the efficiency of the pseudo-class selector is the lowest,

Detailed introduction You can also click Writing efficient CSS selectors.

CSS selectors and their precedence

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More