我有以下代码:



.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;”。

10-05 21:03
查看更多