CSS: The weight and cascade rules determine its priority. css Cascade

CSS: The weight and cascade rules determine its priority. css Cascade

Source: http://www.ido321.com/1063.html

 

First, let's look at an example of CSS priority: http://www.ido321.com/76.html

I. basic priority rules

Compare the number at the same level. If the number is the same, it has a higher priority. If the number is the same, compare the number at the lower level. The priority for each level is as follows:

Important> inline> ID> class> label | pseudo class | attribute selection> pseudo Object> wildcard> inheritance

Ii. CSS weight rules

As mentioned in modular design in page reconstruction, there are two important factors that affect the CSS style weight:

A: the priority of A style depends on the order defined by the style.

B: The weight is related to the type and quantity of the selector.

In general, if two styles with the same name exist in the same CSS file, the latter will overwrite the first one. For the priority of the selector type, see (1 ).

How is the CSS weight calculated?

Weight representation of a selector: 0.0.0.0. Fill each number according to calculation rules. If the corresponding position is equal, compare the next digit.

The weight calculation rules are as follows: (for convenience, A. B .C.D is used to replace the values at different positions)

1. Embedded style: A = 1, B = C = D = 0 (1.0.0.0)

2. ID style: There are several IDs in selector, and A few IDs are added for 2nd bits, for example, # header {color: red}, that is, A = C = D = 0, B = 1 (0.1.0.0)

3. Classes, pseudo classes, and the number of attributes are the third-digit values:

. A. B [type = "text"]: hover {}. The selector has two classes, one attribute, and one pseudo class. Therefore, its 3rd-bit value is 4, A = B = D = 0, C = 4, (0.0.4.0)

4. The number of pseudo and label elements is the fourth value.

P: first-letter, which has A label element p and A pseudo element first-letter. The value is 2, A = B = C = 0, D = 2 (0.0.0.2)

5. The wildcard character and the inherited CSS attribute have no effect on the weight.

Iii. Examples

For more information, see the following examples.

1. a. B. c {color: red;} // 0.0.3.0 Description: there are only three classes.

2,*{...} // 0.0.0.0 Description: The wildcard character does not affect the weight.

3.. a. B a {color: green} // 0.0.2.1 Description: two classes and one label

4. # hid {color: black;} // 0.1.0.0 Note: there is only one ID

 

Next article: "previous lives" of the HTML 5 History API"

 

CSS attribute setting priority

1. Multiple selectors may select the same element, with three rules, reducing the importance from top to bottom:
! Important user Style
! Important author Style
Author Style
User Style
Style defined by the browser

2.
CSS norms define special weights for different types of selectors. The higher the special weights, the style will be applied preferentially.
The weight is set as follows:
Html selector with a weight of 1;
Class selector with a weight of 10;
Id selector. The weight is 100;
There is another situation: the style attribute is directly used in html tags, where the weight of the style attribute is 1000;
The following is the case:
# X34y {color: red}
<. P id = x34y style = "color: green"> Select style = "" first.

Example:
H1 {color: blue} weight is 1
P em {color: yellow} weight is 2
. Warning {color: red} weight is 10
P. note em. dark {color: grag} weight is 22
# The weight of main {color: black} is 100. Here is another case:
What should I do when the weights are the same?

3. CSS style cascade principle-who is close to me and who has the say.
When the weights are the same, the "cascade principle" is adopted and the defined values will be applied.
For example, p {color: yellow}
P {color: red}
What is my color? </P>
The result will be red.

4. Special CSS style markup-who has the privilege and who has the right to say.
If someone doesn't take it easy, they have to say what they have to say. You can have some privileges as follows:
P {color: blue! Important ;}
Add! Important; you can set your weight to the highest.

What is the priority of the weight in CSS?

I. Priority of CSS usage:
1. Intra-row styles: Embedded styles are applied to various web page elements. For example, <div style = "width: 100px;"> </div> has the highest priority.
2. Inner page style: Create an embedded style sheet on the webpage. Directly write it in the webpage, such as 3. External style: link a webpage to an external style sheet. Use <link href = "css.css" rel = "stylesheet" type = "text/css"/> to introduce CSS with the lowest priority

Ii. CSS selector priority:
1. The ID selector has a higher priority than the CLASS selector, for example, # div1 is higher than. div1
2. the hierarchical definition has a higher priority, for example, # div1. img is higher than. img
......