CSS priority issues

Source: Internet
Author: User

About CSS Specificity
CSS specificity features or extraordinary, it is a measure of the precedence of CSS values of a standard, since as a standard, there is a set of relevant rules and calculations, specificity with a four-bit digital string (CSS2 is three bits) to represent, more like four levels, Values from left to right, the largest on the left, a level greater than a level, there is no system between digits, the level can not be exceeded.
When multiple selectors are applied to the same element then the specificity value is higher and the final priority is obtained.
Selector specificity Value list:
1. The in-line style priority specificity value is 1,0,0,0, which is higher than the external definition.
such as: <div style= "color:red" >sjweb</div>
External definition refers to rules defined by <link> or <style> tags;
The 2.!important declaration has the highest specificity value;
3.Specificity values in the same case, in the CSS code in the order in which they appear, the latter CSS style;
4. The continuation of the resulting style has no specificity calculation, it is below all other rules (such as the global selector * defined rules).

When multiple selectors are encountered at the same time
The specificity value obtained by the selector is added to the bits,
{There is no binary between digits such as: 0,0,0,5 + 0,0,0,5 =0,0,0,10 instead of 0, 0, 1, 0}
We get the final specificity,
Then compare the trade-offs with a bitwise comparison of the left-to-right order.

Example Analysis:
1.div {font-size:12px;}
1 element {div},specificity value is 0,0,0,1

2.body div P{color:green;}
3 elements {Body div p},specificity value is 0,0,0,3

3.div. sjweb{font-size:12px;}
1 elements {div},specificity value is 0,0,0,1
1 class Selector {. Sjweb},specificity value is 0,0,1, 0
Final: specificity value is 0,0,1,1

4.Div # sjweb {font-size:12px;}
1 elements {div},specificity value is 0,0,0,1
1 class Selector {. Sjweb},specificity value is 0,1,0, 0
Final: specificity value is 0,1,0,1

5.html > Body div [id= "totals"] ul li > P {color:red;}
6 Elements {HTML Body div ul li P} specificity value is 0,0,0,6
1 attribute Selectors {[id= "totals"]} specificity value is 0,0,1,0
2 additional selectors {> >} specificity value is 0,0,0,0
Final: specificity value is 0,0,1,6

!important has the highest priority

CSS priority issues

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.