Questions about CSS selectors

  1. Let me tell you what the selectors of CSS are

  2. What are the priorities

  3. Weight calculation method

The majority of people responded like this:

CSS selectors include inline styles, ID selectors, class selectors, and label selectors, with lower priority. Important can be used for priority promotion, which is higher than inline style priority. The weight calculation is 1000,100,10,1,! The priority of important is infinite.

But in fact, 1000,100,10,1 is not a decimal number 1000,100,10,1, but a base number, not base 2, not base 10, but base 256, that is, 0 to 255 +1 is 1, for example, the weight of the wildcard is 0, the weight of the pseudo-element is 1, 255 difference in the middle, and so on.

And,! For example, infinity +1 or *2 is greater than infinity. The reason is that infinity is bounded in computers, not in mathematics.

CSS selector type

Style type

External styles: or @import introduced

Selector type

Id selector, Class selector, attribute selector, *, pseudo-class selector, pseudo-element, descendant selector, subclass selector, sibling selector

Weight calculation rules

  • First priority:! importantOverrides element styles anywhere on the page
  • 1. Inline style, such asstyle="color: green", the weight of1000
  • 2.ID selector, for example#app, the weight of0100
  • 3. Class, pseudo-class, attribute selector, e.g.foo, :first-child, div[class="foo"], the weight of0010
  • 4. Tags, pseudo-element selectors, such asdiv::first-line, the weight of0001
  • 5. Wildcard, subclass selector, sibling selector, such as*, >, +, the weight of0000
  • 6. Inherited styles have no weights

Compare the rules

  • 1.1000 > 0100, one by one from left to right. Only when the previous level is equal, can the next level be compared
  • 2. No matter the inline style, internal style or external style, they are all compared according to the weight method mentioned above. When facing the priority comparison in the interview, the answer is usually:Inline > ID > Class > element (tag)“, we think we have given a satisfactory answer to the interviewer, but in fact, it is not true. For example, if we operate on the same element with equal weight, the latter style will overwrite the former, so the answer we give is not valid
  • 3. With the same weight, the style at the back overrides the style at the front
  • 4. Wildcard, child selector, sibling selector, although the weight is0000, but takes precedence over inherited styles
P {color: yellowgreen} /* 0,0,0,1 */. Para {color: red} /* 0,0,1,0 */. Pink} /* 0,0,1,1 */. Main p[class*="para"] {color: RGB (0, 255, 115)} / / / * * 0,0,2,0 * weight are the same, which covers the former * /. The main p [class ="para1"] {color:teal} /* 0,0,2,0 */ div"para2"]{color: blueviolet; } inner p:nth-child(4) {color: cornflowerblue! important; } / * 0,0,2,0,! Important Upgrade priority */Copy the code

The style rendering looks like this:

The complete code is as follows:


      
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            font-size: 24px;
        }
        .main {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(50%, 50%); }p {color: yellowgreen} / * 0,0,0,1 * /
        .para {color: red} / * 0,0,1,0 * /
        .inner p {color: pink} / * 0,0,1,1 * /
        .main p[class*="para"] {color: rgb(0, 255, 115)} / * 0,0,2,0 * / /* With the same weight, the latter overwrites the former */
        .main p[class="para1"] {color:teal} / * 0,0,2,0 * /
        div.main p[class="para2"]{color: blueviolet; }/ * 0,0,2,1 * /
        .inner p:nth-child(4) {color: cornflowerblue ! important; }/ * 0,0,2,0,! Important Upgrade priority */
    </style>
</head>
<body>
    <div class="main">
        <div id="app" class="inner" >
            <p style="color: red;">I'm red, inline style works</p>
            <p class="para1">Wild grasses spread over ancient plain</p>
            <p class="para2">With spring and fall they come and go</p>
            <p class="para3">Wild fire can't burn them up; again</p>
            <p class="para4">They rise when vernal breezes blow</p>
        </div>
    </div>
</body>
</html>
Copy the code

References:

Developer.mozilla.org/zh-CN/docs/… www.cnblogs.com/wangmeijian… Blog.csdn.net/qq_36130706…