Detailed explanation of css class selector class name override priority instance

• code

  <style>
     .a{
    background: red;
     }
     .b{
    background: yellow;
     }
  </style>
  <div class="a b">A</div>

• Rendering effect
  

  At first I thought I would change the order of the class names in the class class in the element. The rendering effects will be rendered in sequence according to the class name

• code

  <style>
     .a{
    background: red;
     }
     .b{
    background: yellow;
     }
  </style>
  <div class="b a">A</div>

• Rendering effects
  

  Changing the order of the class names in the element class does not affect the rendering order

• code

     <style>
     .b{
    background: yellow;
     }
     .a{
    background: red;
     }
     </style>
  <div class="a b">A</div>

• Rendering effect
  

  Changing the order of classes in the style sheet will affect the rendering order

  Conclusion: The two classes have the same attribute coverage order, which is the order from bottom to top in the css style sheet

The above is the detailed content of Detailed explanation of css class selector class name override priority instance. For more information, please follow other related articles on the PHP Chinese website!