css类选择器类名覆盖优先级实例详解

code

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

渲染效果

最初以为更改元素中class类里面的类名顺序，渲染效果就会根据类名顺序依次渲染

code

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

渲染效果

更改元素class里面类名的顺序并不能影响渲染顺序

code

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

渲染效果

更改样式表里类的顺序 渲染顺序受到影响 结论：两个类中有同样的属性覆盖顺序是css样式表从下往上的顺序

以上就是css类选择器类名覆盖优先级实例详解的详细内容，更多请关注Gxl网其它相关文章！

查看更多关于css类选择器类名覆盖优先级实例详解的详细内容...