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

select .wrap .sel比.sel更具体，因此它会覆盖.sel颜色定义。 同样适用于选择器。 如果你想让它们覆盖，你应该使它们更具体或添加！重要，如“blue！important;”