CSS 优先级

当对同一元素存在冲突的 CSS 规则声明的时候，浏览器采用 CSS 优先级来确定最终应用的规则。

通常而言，在众多的 CSS 选择器中 ID 选择器的优先级最高，而内联样式又会覆盖外部的样式。

CSS 选择器的优先级

每个选择器在优先级层次结构中都有权重，下表按优先级从小到大的顺序排列选择器。

1. 通用选择器（*）
2. 元素选择器、伪元素，比如 h1, p, ::before 等
3. 类选择器、属性选择器、伪类，比如 .card, [target], :focus 等
4. ID 选择器，比如 #logo

虽然 ID 选择的优先级最高，但是元素添加的内联样式总是会盖外部的样式，所以内敛样式的优先级是最高的。

#logo 是 ID 选择器， [id=logo] 是属性选择器，虽然两者选择元素是同一个，但是从 #logo 变为 [id=logo] 后，优先级会降低。

如何应用优先级？

优先级就是分配给指定的 CSS 声明的一个权重。

当同一个元素有多个声明的时候，优先级才会有意义。浏览器依据优先级来选择要应用的规则。优先级高的规则最终会应用到元素上。

当多个 CSS 声明的优先级相等的时候，在 CSS 文件中最后声明的规则将会被应用到元素上。

优先级实例

相同优先级靠后声明的规则被应用到元素

h1  {
  background-color: yellow;
}
h1  {
  background-color: red;
}

ID 选择器比属性选择器具有更高的优先级

div#a  {
  background-color: green;
}
#a  {
  background-color: yellow;
}
div[id="a"]  {
  background-color: blue;
}

最终应用的 div#a 的规则，因为是更具体的 ID 选择器声明。

类选择器胜过任意数量的元素选择器

.intro  {
  background-color: yellow;
}
h1  {
  background-color: red;
}