CSS Selector weight value calculation rule

Source: Internet
Author: User

First, Style type

1. Between rows

  2. Inline

<style type= "Text/css" >   h1{font-size:12px;      Color: #000;      } </style>  

3. External

<link rel= "stylesheet" href= "Css/style.css" >

Second, selector type

  1. ID #id

  2, Class. class

  3. Label P

4. General *

5. Properties [type= "text"]

6, Pseudo-class: hover

7, Pseudo-element:: First-line

8, sub-selectors, adjacent selectors

Third, the weight calculation rules

    1. First: Represents the inline style, such as: style= "", the weight value is 1000.
    2. Second: Represents the ID selector, such as: #content, the weight value is 0100.
    3. Third class: Represents classes, pseudo-classes, and attribute selectors, such as. Content, with a weight of 0010.
    4. Class IV: Represents a type selector and a pseudo-element selector, such as Div p, with a weight of 0001.
    5. Wildcard characters, sub-selectors, adjacent selectors, and so on. such as *, >, +, the weight value is 0000.
    6. Inherited styles do not have a weighted value.

Iv. Rules of comparison

    1. 1,0,0,0 > 0,99,99,99. That is to say, from left to right, rank by level, the previous level is equal to the backward ratio.
    2. Both inline, internal, and external styles are compared by this rule. Instead of intuitive inline > Internal > External style;id>class> elements. The reason for this illusion is that the weight of the row is the first, so its weight is the highest. The internal style may be generally written after the external style reference, so overwrite the previous.
    3. In the case of the same weight, the following style overrides the previous style.
    4. Wildcard characters, sub-selectors, adjacent selectors, and so on. Although the weight value is 0000, it takes precedence over the inherited style.

Five! Important

  1. !important's role is to elevate the priority, in other words. The style with this sentence has the highest priority (higher precedence than inline style).
     <style> p{color:red!important; }</style><p style= "Color:blue;" > I show red </p>   
  2. ie7+ and other browsers have a good support for this effect on important. Only IE6 some bugs
     p{color:red!important;    Color:blue; }//    

    However, this does not mean that IE6 does not support important, only some bugs are supported. Look below

     p{color:red!important;  }p{Color:blue; }// This shows red. Note that IE6 still supports important.     

Vi. examples

  1. A{color:yellow;}/*Special value: 0,0,0,1*/Div A{color:green;}/*Special value: 0,0,0,2*/. demo A{color:black;}/*Special value: 0,0,1,1*/. Demo input[type= "text"]{color:blue;}/**//**/< Span style= "color: #000000;" > #demo A{color:orange;} /**/< Span style= "color: #000000;" > Div#demo a{color:red;} /**/< A href= "" > First should be yellow </a> <!--applicable 1th line rule--><div class= "demo" > <input type= "text" value= "the second bar should be blue"/ ><!--Apply 4th, 5 line rules, line 4th priority High--<a href= "" > Third should be black </a><!--applicable to 2nd, 3 row rules, 3rd row priority High--></div> <div id= "Demo" > <a href= "" "> Fourth should be red </a><!--applicable 5th, 6 row rules, 6th line priority high--></div>   

CSS Selector weight value calculation rules

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.