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

What is the loading order and coverage order of css style? in order to solve this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible method.

The code is as follows:

{

Height: 100%

Width: 200

Position: absolute

Left: 0

Border: solid 2 # EEE

}

.current _ block {

Border: solid 2 # AE0

}

Look for some textbooks (w3schools, etc.), only say that the order of css is "style on elements" > "style elements on file header" > "external style file", but there is no detailed explanation on how to prioritize multiple identical styles in the style file. After testing and continuing the search, we know that the priorities are as follows:

1. The more precise the element selector selection of the stylesheet, the higher the style priority:

Style specified by id selector > style specified by class selector > style specified by element type selector

So in the above example, the style priority of # navigator is higher than the priority of .current _ block, even if .current _ block is newly added, it doesn't work.

two。 For styles developed by the same type selector, the lower the priority is in the stylesheet file

Note that the lower the stylesheet file, the higher the priority, not the order in which the element class appears. For example, .class2 appears after .class1 in the style sheet:

The code is as follows:

.class1 {

Color: black

}

.class2 {

Color: red

}

While an element is specified with class= "class2 class1" when class is specified, although class1 is specified after class2 in the element, because class1 precedes class2 in the stylesheet file, class2 still has a higher priority at this time, and the attribute of color is red, not black.

3. If you want a style to have a higher priority, you can use! important to specify:

The code is as follows:

.class1 {

Color: black! important

}

.class2 {

Color: red

}

At this point, class will use black instead of red.

There are two solutions to the problems encountered at the beginning:

1. Take border out of # navigator and put it in a class .block, and .block before .current _ block:

The code is as follows:

# navigator {

Height: 100%

Width: 200

Position: absolute

Left: 0

}

.block {

Border: solid 2 # EEE

}

.current _ block {

Border: solid 2 # AE0

}

Need to default to # navigator element to specify class= "block"

two。 Use! important:

The code is as follows:

# navigator {

Height: 100%

Width: 200

Position: absolute

Left: 0

Border: solid 2 # EEE

}

.current _ block {

Border: solid 2 # AE0! important

}

No other changes are required to take effect at this time. It can be seen that the second scheme is simpler.

The answer to the question about the loading order and coverage order of css style is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

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.