Home > Developer > Web Develop

CSS Selector Precedence Summary

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

CSS three major features-- inheritance, precedence, and cascading.

Inheritance: the child class element inherits the style of the parent class;

priority: refers to the weight comparison of different categories of styles;

Cascade: is the style of stacking (the latter covering the former) when the quantity is the same.

CSS Selector categories

First look at what CSS selectors (CSS selectors) are.


1. Tag Selector (for example: Body,div,p,ul,li)

2. Class selector (e.g.: class= "Head", class= "Head_logo")

3.ID selector (for example: id= "name", id= "Name_txt")

4. Global selector (e.g., *)

5. Combo Selector (e.g.:. Head Head_logo, note two selector separated by SPACEBAR)

6. Descendant selector (e.g.: #head. Nav ul Li from parent set to descendant set selector)

7. Group selector div,span,img {color:red} is a group of labels with the same style displayed

8. Inherit selectors (e.g. Div p, note two selector separated by SPACEBAR)

9. Pseudo-class selectors (such as: Link style, a pseudo-class of elements, 4 different states: link, visited, active, hover. )

10. String Matching Property selector (^ $ * three, respectively, corresponding start, end, inclusive)

11. Sub-selector (e.g.: div>p, with greater than sign >)

12.CSS adjacent brother selector (e.g. h1+p, with Plus +)

CSS Precedence

When the two rules all work on the same HTML element, if the defined attributes have conflicts, then the CSS has a set of precedence definitions for whose values should be used.

Different levels

    1. Using!important after a property overrides the element style defined anywhere within the page.
    2. Styles written as style attributes within an element
    3. ID Selector
    4. Class Selector
    5. Tag Selector
    6. Wildcard Selector
    7. Browser customization or inheritance

Summary sort:!important > Inline style >id selector > class selector > Label > Wildcard > Inherit > Browser Default properties

Same level

Post-write overrides in the same level will overwrite the first-written style

The above level is easy to understand, but sometimes some rules are a combination of multiple levels, like this

<!doctype html>
In the end Div is the application of that rule, there is a simple calculation method (by the park friend hint, the weight is not actually in decimal, with a number to indicate just thought, 10,000 class is not as good as an ID weight)

 
 
    
  
  
       
   
    • The weighted value of the inline style sheet is 1000
      •  
   
    • The ID selector has a weight value of 100
      •  
   
    • The class selector has a weight value of 10
      •  
   
    • The weight value of the HTML tag Selector is 1
      •  
  
    
 
 
We can add the rules in the selector, compare weights, if the weights are the same, then cover the front of the div.class, the weight of the 1+10=11, and. Test1. Test2 is 10+10=20, so the div applies. test1. Test2 turns green.
Another way of understanding:
CSS Precedence: is determined by the number of occurrences of four levels and levels.

The four levels are: inline selector, id selector, category selector, element selector.

The algorithm of the priority level:

Each rule corresponds to an initial "four-digit number": 0, 0, 0, 0

If the inline selector, add 1, 0, 0, 0

If the ID selector, add 0, 1, 0, 0

If class selector/attribute selector/pseudo-class selector, add 0, 0, 1, 0 respectively

If element selector/pseudo element selector, add 0, 0, 0, 1 respectively

Algorithm: Each rule, the number of selectors corresponding to the "four-digit", from left to right to compare, the greater the higher priority.
To be aware of:
The priority of ① and!important is the highest, but when there is conflict, it is necessary to compare the "four digits";

②, the priority is the same, then adopt the nearest principle, choose the last appearance style;

③, inherited attributes, with the lowest priority;

!important > Inline style >id selector > class selector > Label > Wildcard > Inherit > Browser Default properties

The use of the *CSS selector is strongly recommended using the principle of low weight, conducive to the full use of CSS inheritance, reusability, modularization, component.
the parsing principle of CSS selectors         It used to be that the positioning DOM element of the selector was left-to-right, looking at the relevant information on the Internet before discovering that it was always wrong. The solemn declaration selector locates DOM elements in a right-to-left direction, with the benefit of filtering out extraneous style rules and elements as early as possible. Why is the CSS selector parsed from right to left???

simple, efficient CSSThe so-called efficiency is to let the browser find fewer element tags to determine the matching style element.      1. Do not use the tag name before the ID selector to interpret: ID selection is unique, plus the label name is equivalent to the lily, not necessary. 2. Do not use tag name interpretation before class selector: It is not necessary to have the same name, but if there are multiple class selectors of the same name it is necessary to add tag names to prevent confusion such as (p.colclass{color:red;} and Span.colclass{color:      Red;} 3. Use as few hierarchical relationships as possible; #divclass p.colclass{color:red;}      Change to. colclass{color:red;} 4. Use the class selector instead of a hierarchical relationship (as above)
CSS Selector Precedence Summary

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