css选择器优先级
程序员文章站
2024-01-29 17:56:04
...
优先级如下
- !important
- style属性
- 描述精确度
- id选择器数量多的
- class选择器数量多的
- tag选择器数量多的
- 写在后面的
<style>
div{
color:red;
}
div p{
color:blue;
}
/* 精确度 */
#d1 p.cp2#p2{
color:green;
}
#d1 .cp2.cp2#p2{
color:purple;
}
/* id选择器数量相等,看类选择器 */
</style>
<div id='d1' class="cd1">
<p id='p1' class='cp1'>p1</p>
<p id='p2' class='cp2'>p2</p>
</div>
稍微修改一下:
<style>
div{
color:blue;
}
div{
color:red;
}
/* 写于后 */
#d1 p.cp2#p2{
color:green;
}
#d1 .cp2.cp2#p2{
color:purple;
}
#p2{
color:green !important;
}
/* !important优先级max */
</style>
<div id='d1' class="cd1">
<p id='p1' class='cp1'>红色</p>
<p id='p2' class='cp2'>绿色</p>
</div>
上一篇: CSS - 选择器优先级介绍
下一篇: css浮动