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

In this article Xiaobian for you to introduce in detail "what is the cascading and weight in css", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "cascading and weight in css" can help you solve your doubts.

Cascading: multiple selectors select the same tag and set the same style. when loaded in the browser, all property values are not loaded, pick one to load, and one of them cascades / overwrites the other values.

To achieve cascading or overlay involves comparison. The following is the comparison of the weights between comparison selectors. There are two cases of weight comparison: 1. The selector selects the tag; 2. The selector does not select the tag.

First, let's talk about the weight of the selector: id > class > tag > * (wildcard)

The ① selector selects the tag:

First of all: if all tags are selected, compare selector weights.

The selector has weight, and the heavy one will be cascaded with small weight.

Calculate weight: the larger the range of selector selection, the smaller the weight. Id > class > tags > *

Methods: the number of number selector, first compare the number of id → and then compare the number of class → finally compare the number of tags.

Second: if the selector weights are the same, compare the writing order of the code in css.

The css code has a loading order, loading from top to bottom, and the later load will override the previous load.

# box1 .box2 .box3p {(1pm 2pm 1)

Color: red

}

.box1 # box2 .box3p {(1pm 2pm 1)

Color: green

}

.box1 .box2 # box3 p {(1mem2jue 1) Last in writing order, cascading the front style color: blue

}

None of the ② selectors have tags checked: some styles are inheritable. Inherit from whom?

First of all: compare the elements selected by each selector, the distance from the target element p in the HTML, the distance from the nearest cascading distance. The principle of proximity for short.

# box1 {

Color: red

}

.box1 .box2 {

Color: green

}

.box3 {the selected tag is closest to p, inheriting his

Color: blue

}

Second: if the distance is as close, compare the weight, the weight of the cascading weight is small.

# box1 .box2 # box3 {(2pm 1jue 0)

Color: red

}

.box1 # box2.box2 # box3 {(2meme 2jin0) color: green

}

.box1 .box2 # box3.box3 {(1meme 3jin0)

Color: blue

}

Again: if the distance is the same, choose the same weight, look at the writing order.

# box1 .box2 # box3.box3 {

In particular, in the process of comparing weights, there is a word important that can increase the weight of a style attribute to the maximum.

Compared with the nearest principle, important has no effect on inheritance.

# box1 .box2 # box3.box3 {

Color: red

}

# box3 {

Color: green! important; increases the weight of this attribute to the maximum, regardless of selector weight

}

# box1.box1 # box2 .box3 {

Color: blue

}

After reading this, the article "what is the cascading and weight in css" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.