CSS Weight Concept

Browsers use precedence to determine which attribute values are most relevant to an element and apply those attribute values to that element. Priority is a matching rule based on different kinds of selectors.

Average weight

In general, the default CSS weights look like this: the weights go from high to low, with the high overriding the low-weighted CSS

  1. Use! After properties Important overrides element styles defined anywhere on the page
  2. An inline style written on an element tag as a style attribute
  3. The id selector
  4. Class selectors
  5. Pseudo-class selector
  6. Property selector
  7. Label selector
  8. Wildcard selector
  9. Browser customization

Weight calculation method for complex scenarios

How to calculate the CSS weight based on the normal weight? Let’s make an assumption. It’s an assumption, and I’m going to use this number to help us understand how to calculate weights

The selector Inline style The id selector Class, property selector and pseudo-class selector Tag selectors, pseudo-elements
Weight value 1000 100 10 1

How do you interpret these weights?

CSS # box.left div{color:#4e98bb; } You can imagine the HTML structure as follows:

<div id="box">
  <div class="left">
    <div>I'm the div that's being computed</div>
  </div>
</div>
Copy the code

So what does this CSS weight compute? 100(id selector) + 10(class selector) + 1(label selector) = 111

Is this it? Name is complicated? How about some practical

What color did the final color render? why

<style>
  #box .left div {
    color: blue; / * * / blue
  }
  .box-content .left div {
    color: green; / * * / green
  }
  #box-content .left div {
    color: purple; / * * / purple
  }
  .left {
    color: red; / * * / red
  }
  .left div {
    color: yellow; / * * / huang
  }
</style>

<div class="box-content" id="box-content">
  <div id="box">
    <div class="left">
      <div>I'm the div that's being computed</div>
    </div>
  </div>
</div>
Copy the code

See the answer and the calculation

Final render: Blue blue

Calculate the weight values respectively:

  • Green, green: 2 * class selector =20
  • Blue blue: 1* ID selector + 1* Class selector + 1* Tag selector =111
  • Purple purple: 1* ID selector + 1* Class selector + 1* Tag selector =111
  • Red red: 1*class selector =10
  • Yellow, yellow: 1*class selector + 1* label selector =11

According to the calculation method of weight: the highest weight isblueandpurple

Why blue in the end? This has nothing to do with the CSS order, it has to do with the div structure, #box is much closer than #box-content under the same weight. So the render is blue

If you add a layer to the purple class selector, it will become: #box-content # box.left div{}. Then the rendering is purple, and the weight of purple is the highest

The subtotal

  1. The final CSS calculation rule is based on the weight, the highest weight of the CSS will be rendered
  2. With the same weights, select the CSS style of the closest selector based on the structure of the div for rendering

Let’s do a bunch of examples to calculate the weights

Can you tell me the calculation?

*             {}  /* 0 */
p             {}  / * 1 * /
a:hover       {}  / * * / 20
ul li         {}  / * 2 * /
ul li+li      {}  / * 30 * /
h1+input[type=hidden]{} / * * / 12
ul ol li.active   {}  / * * / 13
#ct .box p        {}  / * * / 111
div#header::after  {}  / * * / 102

/* Inline style */
style=""  / * * / 1000
Copy the code
  • The addition of selectors that occur many times can be repeated (e.gli+liIs equivalent to 2 tag selectors, which can be denoted as 2 here.)
  • [type=hidden]Belongs to an attribute selector and weighs more than a label selector
  • Notice the distinction between pseudo-classes and pseudo-elements. Pseudo-classes have a higher weight than pseudo-elements

How do you distinguish pseudo-classes, pseudo-elements?

Pseudo class :: hover pseudo element :: :after

  • Pseudo-classes do not add content, just a style supplement, usually:hover.:focusThey don’t change the HTML structure, they don’t add nodes
  • Pseudo-elements: LikeafterThis kind of. Must be added after usecontentProperty, andcontentThe content of the attribute will be rendered in HTML, just like our actual HTML elements, just added with CSS

conclusion

  • The above calculation is just an assumption. Real CSS calculations are much more complicated than this, so this assumption is just for the sake of understanding

  • If you override CSS styles later, you can use this rule to add the appropriate number of class selectors to avoid writing inline styles or using! Important or something like that

  • In addition to the selector weights described above, wildcard and browser style default weights are the lowest, with the lowest being negligible

Is there a highest weight selector?

  • There are!<div style="color:red ! important;" ></div>Anyone who can write this has been killed

One last tip

  • There is another way to introduce CSS:@importUnder normal circumstances, do not use import, it will let us refer to the CSS file style overwrite the current style.