Do you often write invalid styles when cutting diagrams? I can’t figure it out



Why do they always cancel out their own styles? Why do you always say “important”?



I guess it should be the CSS weight problem, did not understand it thoroughly

Here are some examples of CSS weights.

<p class='p2' id="p2"> daasd  </p>
Copy the code

p { color: red; /* weight 1 */}Copy the code



.p2 { color: yellow; /* weight 10 */}Copy the code



#p2 {color: blue; /* weight 100 */}Copy the code



<p style="color:pink;" class='p2' id="p2"> daasd </p> // Answer: No inline weight greater than class and IDCopy the code



p { color: red ! important; /* weight 1 + important */""} .p2 { color: yellow; /* weight 10 */}#p2 {color: yellow; /* weight 100 */}Copy the code



<p style="color:pink ! important;" class='p2' id="p2"> daasd </p> importantCopy the code



<div id="div">
  <p class="p2" id="p3">daasd</p>Copy the code

#div p {/* now the weight is 100 + 1 */ greater than the following twocolor:red; }.p2 {/* weight = 10 */ color:yellow; }#p3 {/* weight is 100 */
  color:blue;
}  
Copy the code



Or a more complex nesting?

<div id="div" class="div-class">
  <div id="div1" class="div1-class">
    <div id="div2" class="div2-class">
      <div id="div3" class="div3-class">
         <p class="ap" id="p">daasd</p>
      </div>
    </div>
  </div>
</div>Copy the code

#div p {/* weight 100 + 1 */color: red; } / *#div p {/* weight 100 + 1 + important */color: red ! important; } * /#div #div1 p {/* weight 100 + 100 + 1 */
  color: pink;
}
#div #div1 #div2 p {/* weight 100 + 100 + 100 + 1 */
  color: yellow;
}
#div1 #div2 #div3 p {/* weight 100 + 100 + 100 + 100 + 1 */
  color: blue;
}
Copy the code



.div-class #div1 .div2-class .div2-class p { /* 10 + 100 +10 + 10 + 1 */
  color:red;  
}
#div .div1-class #div2 .div3-class p { /* 100 + 10 + 100 + 10 + 1 */
  color:blue;
}
#div #div1 #div2 .div3-class p { /* 100 + 100 + 100 + 10 + 1 */
  color:pink;
}
#div #div1 .div2-class .div3-class p { /* 100 + 100 + 10 + 10 + 1 */
  color:black;
}
#div #div1 .div2-class .div3-class #p { /* 100 + 100 + 10 + 10 + 100 */
  color:yellow;
}
#div #div1 .div2-class .div3-class .ap { /* 100 + 100 + 10 + 10 + 10 */
  color:green;
}
#div #div1 .div2-class #div3 .ap { /* 100 + 100 + 10 + 100 + 10 */
  color:aqua;
}Copy the code

The analysis shows that the last maximum weight is 320 covering all of the above.

The more nesting, the greater the weight, divide! Portant, portant, portant

(Note that the id class tag is computed during nesting.)

Let’s talk about the weights of pseudo-elements and pseudo-classes

The weight of the pseudo-class is equivalent to the weight of the class element

<p class='p2' id="p2"> daasd </p> p { color: red; Weight / * 1 * /} p: hover {/ * similar: hover, : visited, : active, : the link is on behalf of pseudo class * / color: yellow; /* hover (1) */}. P2 :hover (1) {/* hover (1); }#p2:hover {/color: pink; } /* If one of them is added! Hover {/ p:hover {/ p:hover {/ p:hover {/ important; /* hover (1) + hover (10) + hover (10) */Copy the code

This is what it looks like when it’s not pointing up

The label pseudo class refers to this effect

Class pseudo-class refers to this effect (offset tag pseudo-class)

Id pseudo-class refers to this effect.

Tag pseudo class plus! Important means this effect (offset all above)

Hover is invalid because the weight of the pseudo-class is equivalent to the weight of the class element, so the weight of the class element is less than the weight of the ID element.

p { color: red; / * * / 1}#p {color: pink; /* 100 */ } .p:hover { color: blue; /* 10 + 10 */}Copy the code

Always pink

p { color: red; / * * / 1}#p {color: pink; / * * / 100}#p:hover {color: aqua; /* 100 + 100 */}Copy the code

It’s light green

The weight of the pseudo-class is equivalent to the weight of the tag element

<p class='p2' id="p2"> daasd </p> p { color: red; Weight / * 1 * /} p: after {/ * similar: hover, : visited, : active, : the link is on behalf of pseudo class * / color: yellow; /* hover (1) */Copy the code