Home > Developer > JavaScript
Css --- special nature of selector, css --- Selector
This is because of its special nature. It's time to sort it out ~
Let's talk about the approximate selector.
The most authoritative is the css authoritative guide.
We divide the particularity into four levels, each of which represents a type of selector. The value of each level is the number of selectors it represents multiplied by the weight of this level, finally, the values of all levels are added to obtain the special values of the selector.
The four levels are defined as follows:
L level 1: indicates the inline style, for example, style = ", and the weight is 1000.
L second: ID selector, for example, # content. The weight is 100.
L Third: indicates the class, pseudo class, and attribute selector, such as. content. The weight is 10.
L Level 4: indicates the type selector and pseudo element selector, such as div p. The weight is 1.
Note: The general selector (*), sub-selector (>) and adjacent compatriot selector (+) are not in these four levels, so their weights are both 0.
Chestnut comes
<Html> # content div # main-content h2 {color: red ;} /* = 2*100 + 2*1 = 202 */# content # main-content> h2 {color: blue}/* = 2*100 + 1 = 201 */body # content div [id = "main-content"] h2 {color: green ;} /* = 1*100 + 1*10 + 3*1 = 113 */# main-content div. paragraph h2 {color: orange ;} /* = 1*100 + 1*10 + 2*1 = 112 */# main-content [class = "paragraph"] h2 {color: yellow ;} /* = 1*100 + 1*10 + 1*1 = 111 */div # main-content div. paragraph h2.first {color: pink;}/* = 1*100 + 2*10 + 3*1 = 123 */
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
