Explication détaillée de l'instance de priorité de remplacement du nom de classe du sélecteur de classe CSS

• code

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

• Effet de rendu
  

  Au départ, je pensais changer le nom de la classe dans le classe dans l'ordre des éléments, l'effet de rendu sera rendu dans l'ordre selon l'ordre du nom de classe

• code

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

• effet de rendu
  

  La modification de l'ordre des noms de classe dans la classe d'éléments n'affecte pas l'ordre de rendu

• code

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

• Effet de rendu
  

  Changer l'ordre des classes dans la feuille de style affectera l'ordre de rendu

  Conclusion : Les deux classes ont le même attribut ordre de couverture, qui est l'ordre de bas en haut dans la feuille de style CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!