css类选择器类名覆盖优先级实例详解
程序员文章站
2022-03-16 23:29:01
...
-
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类选择器类名覆盖优先级实例详解的详细内容,更多请关注其它相关文章!