我有以下代码:
.wrap .sel{
background-color: red;
}
.sel{
background-color: blue;
}
select{
background-color: yellow;
}
<div class='wrap'>
<select class='sel'>
<option>CSS</option>
<option>JS</option>
</select>
<div>
即使更改CSS部分中的规则顺序,为什么颜色总是变成红色?
谢谢 !
编辑:
我知道如何使用
!important
,我只是问了这个问题以了解浏览器如何选择css规则。 最佳答案
select .wrap .sel比.sel更具体,因此它覆盖了.sel颜色定义。
与选择选择器相同。
如果要覆盖它们,则应使其更具体,或添加!important,例如“ blue!important;”。