Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to understand the weight and cascading rules determine the priority of CSS style". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The code is as follows:

# redP p {

/ * weight = 100,116,101 * /

Color:#F00; / * Red * /

}

# redP .red em {

/ * weight = 100mm 101m 111 * /

Color:#00F; / * Blue * /

}

# redP p span em {

/ * weight = 100 "1" 1 "103 * /

Color:#FF0;/* yellow * /

}

Red

Em red

Red

1. Basic priority rules

Compare the number of the same level, the more the priority is, if the same is the same, that is to compare the number of the next level, as for the priority of each level is as follows:

Important > inline > ID > Class > tag | pseudo class | attribute selection > pseudo object > wildcard > inheritance

II. CSS weight rules

In "Modular Design in Page Refactoring," it is mentioned that there are two important factors that affect the weight of CSS styles:

A: the priority of styles is related to the order in which styles are defined.

B: the size of the weight is related to the type and number of selectors

In general, if there are two styles with the same name in the same CSS file, the later defined will overwrite the first defined. For the priority of the selector type, see (1).

So, how is the weight of CSS calculated?

A selector weight representation: 0.0.0.0, according to the calculation rules to fill each number, the corresponding position is equal, then compare the next bit.

The rules for calculating the weights are as follows: (for convenience, replace the values of each position with A.B.C.D)

1. Inline style: Achim1je Bauer Centro (I. e. 1.0.0.0)

2. ID style: if there are several ID in the selector, add a few 1s in the second bit, such as # header {color:red}, that is, the Aging Craft Depend0Basil (i.e. 0.1.0.0)

3. The number of classes, pseudo-classes, and attributes is the third-digit value:

.a.b [type= "text"]: hover {}, there are two classes, one attribute and one pseudo-class in the selector, so its third bit is 4, which is named as 0. 0.4.0.

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

P:first-letter, which has a tag element p and a pseudo element first-letter, with a value of 2menagram Bamboo Category 0Didence 2 (i.e. 0.0.0.2)

5. Wildcards and inherited CSS attributes have no effect on weights.

Third, a few examples

For the above, take a look at 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: wildcards have no effect on 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 description: there is only one ID

This is the end of the content of "how to understand weights and cascading rules determine the priority of CSS styles". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.