CSS 选择器的优先级

优先级就是分配给指定的 CSS 声明的一个权重，它由匹配的选择器中的每一种选择器类型的数值决定。

!important > 行内样式 > ID选择器 > 类选择器=伪类=属性 > 标签 > 通配符 > 继承 > 浏览器默认属性

 选择器越具体，其优先级越高

// HTML

<div id="test">
  <span>Text</span>
</div>

// CSS

div#test span { color: green; }
div span { color: blue; }
span { color: red; }

无论 CSS 语句的顺序是什么样的，文本都会是绿色的（green），其次蓝色（blue），最后红色（red）。查看Demo

相同优先级，出现在后面的，覆盖前面的

// HTML

<div class="green blue red">
  <span>Text</span>
</div>

// CSS

.green {
  color: green;
}
.blue {
  color:blue;
}
.red {
  color:red
}

根据顺序规则，Text 颜色为红色。查看Demo

属性后面加 !important 的优先级最高，但是要少用

//HTML

<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

// CSS

#winning {
  background-color: red;
  border: 1px solid black;
}

.better {
  background-color: gray;
  border: none !important;
}

p {
  background-color: blue;
  color: white;
  padding: 5px;
}

两个元素都有 class，第二个元素有 id。border 有 !important。因此，第一个元素为灰色背景无边框，第二个元素红色背景无边框。查看Demo