html - css规则优先级问题

Question

我有以下代码:

.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 规则。

Answer 1

选择 .wrap .sel 比 .sel 更具体，因此它会覆盖 .sel 颜色定义。select 选择器也一样。如果您希望它们覆盖，您应该使它们更具体或添加 !important，如“blue !important;”