Share a detailed analysis of CSS precedence

Before we talk about CSS precedence, we need to understand what css,css is for.

First, let's make a simple description of CSS: CSS is the abbreviation for Cascading style sheets (cascading style Sheets).

Its specification represents a unique stage of development in the history of the Internet. Now for the web-making friends, should rarely have heard of CSS, because before the CSS priority, we have to understand what css,css is used to do.

First, let's make a simple description of CSS: CSS is the abbreviation for Cascading style sheets (cascading style Sheets). Its specification represents a unique stage of development in the history of the Internet. Now for the web-making friends, should rarely have heard of CSS, because in the process of making Web pages we often need to use.

Second: We can use CSS to set a rich and easy-to-modify look to the document to ease the workload of Web page creators, thereby reducing the cost of production and later maintenance.

In fact, now also the CSS is what, CSS has what role is completely redundant, I believe that the web-making friends have been more or less contact.

To get to the point, we start to go into today's topic:

First, what is the CSS priority level?

The so-called CSS precedence refers to the order in which CSS styles are parsed in the browser.

Second, CSS precedence rules

Since the style has a priority, then there is a rule to contract the priority, and this "rule" is the point to be told.

The particularity of the style sheet describes the relative weights of the different rules, and its basic rules are:

1. The number of ID attributes in the statistics selector.

2. The number of class attributes in the statistics selector.

3. The number of HTML tag names in the statistics selector.

Finally, write three numbers in the correct order, without spaces or commas, to get a three-digit number (css2.1 is represented by a 4-digit number). (Note that you need to convert the number to a larger number that ends with three digits). A list of final numbers corresponding to selectors can easily be used to determine that a higher number attribute overrides a lower number.

For example:

1. Each ID selector (#someid), plus 0,1,0,0.

2. Each class selector (. SomeClass), each attribute selector (shaped like [attr=value], and so on), each pseudo-class (shape: hover, etc.) plus 0,0,1,0.

3. Each element or pseudo-element (: FirstChild), etc., plus 0,0,0,1.

4. Other selectors include global selectors *, plus 0,0,0,0. The equivalent of no, but this is also a kind of specificity, will explain later.

Iii. List of selectors for feature classification

The following is a list of selectors categorized by attributes:

Selection character	Attribute value
h1 {Color:blue;}	1
P em {color:purple;}	2
. apple {color:red;}	10
p.bright {color:yellow;}	11
P.bright Em.dark {color:brown;}	22
#id316 {Color:yellow}	100

From the table above, it seems not good to understand, and then give a table:

Selection character	Attribute value
h1 {Color:blue;}	1
P em {color:purple;}	1+1=2
. apple {color:red;}	10
p.bright {color:yellow;}	1+10=11
P.bright Em.dark {color:brown;}	1+10+1+10=22
#id316 {Color:yellow}	100

Through the above, it can be very simple to see that the weight of the HTML tag is 1,class weight is the weight of the 10,id is 100, the weight of the inheritance is 0 (will be mentioned later).

By adding the number of strings to bits by these rules, the final weight is obtained, and then the comparison is based on the left-to-right order.

The priority problem is actually a conflict resolution problem, when the same element (content) is selected by the CSS selector, it is necessary to choose different CSS rules according to the priority, which involves a lot of problems.

Speaking of which, we have to say a bit about the inheritance of CSS.

Iv. the inheritance of CSS

4.1 Performance of the Inheritance

Inheritance is a major feature of CSS, and it is dependent on the ancestor-descendant relationship. Inheritance is a mechanism that allows a style to be applied not only to a particular element, but also to its descendants. For example, a body-defined color value is also applied to the text of a paragraph.

Style definition:

Body {color: #f00;}

Example code:

<p>CSS<strong> Inheritance </strong> Testing </p>

Example effect:

The application result of this code is: "CSS inheritance test" this paragraph is red color, "inheritance" a few words because of the application of <strong> tags, so is bold. Obviously, this text has been inherited by body {color: #f00;} The color of the style definition. That's why inheritance is part of CSS.

However, the weight of CSS inheritance is very low, it is 0 lower than the weight of ordinary elements.

We still take the example code above as an example: Add a bar to the style definition:

Strong {color: #000;}

Example effect:

Discover that you only need to add a color value to <strong> to overwrite the style color it inherits from <body>. Thus, any rule that displays a declaration can override its inheritance style.

4.2 Limitations of inheritance

Inheritance is an important part of CSS, and we don't even have to think about why it works, but there are limitations to CSS inheritance.

Some properties cannot be inherited, such as: border, margin, padding, background, etc.

Style definition:

p {border:1px solid #000;}

Example code:

<p> I am <em>border</em> I can not be inherited by the drop </p>

Expected effect:

Actual effect:

From the above effect, we can see that border is not inherited, there are some other attributes are also the same, here is not listed.

v. The style precedence in the additional description

text is 1,0,0,0, so it is always higher than the external definition. Here the text style refers to the style of <p style= "color:red" >blah</p>, while the external definition refers to the rules defined by <link> or <style& gt; The
has!important declared rules above everything else.
If!important declares a conflict, the precedence is compared.
If priority is the same, it is determined by the order in which it appears in the source code and later on. The
inherited style does not have a specificity calculation, it is below all other rules (such as the rules defined by global selectors *).
for external styles loaded via @import, since @import must appear before all other rule definitions (if not, the browser should ignore them), the general priority conflict is a disadvantage in accordance with the catch-up principle. The
also needs to say that IE is a @import that can identify location errors, but regardless of where @import is located, it is considered to be in front of all other rule definitions, which can lead to some misunderstandings. The

priority problem looks simple, but there is a very complex mechanism behind it, which requires a lot of attention in practical applications.

VI, Exercise

After reading the above text, to do a few very simple topics. (Please don't look at the link address given by the questions before you finish your own answer.)

1. How to use two elements with the same style name with different effects:

Run code box

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > 
Tip: You can modify some of the code before running



Fixed effect:


Fixed code:


2. How to make 

Tip: You can modify some of the code before running




<p class= "Test" > Legendary test </p>
<p class= "Test" > Legendary test </p>


Fixed effect:


Fixed code:

<p> Discussions <em>CSS</em> Priorities </p>

3. How to write an external style makes

The color is red:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > 
Tip: You can modify some of the code before running

4. How to make an element with a. a,.b style appear only. A color style:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > < HTML xmlns= "http://www.w3.org/1999/xhtml" > 
Tip: You can modify some of the code before running

Fixed code:

<p class= "a B" > legendary drop test </p>

About style priorities, let's talk about this today.