CSS优先级

以前我对css优先级的理解很浅，一直以为id选择器最高，并且当出现class="a b c"时，优先级c>b>a。后来又错误地理解为a、b、c三者的优先级高低是根据出现的先后次序来的，后出现的会覆盖先出现的。为此产生了不少bug。于是今天就来把这个问题给搞清楚了。

在讲css优先级之前，先明确几个重要术语（来自css2.1规范）：

• 规则集：由选择器和后跟的声明块组成。
• 声明：即css属性的键值对，比如color: red;就是一个声明。
• 内联样式：定义在标签元素的style属性中。
• 内部样式：定义在<style>标签中。
• 外部样式：定义在通过<link>标签引入的css文件中。

我们所说的优先级，其实指的是“声明”这个粒度的优先级。

好，接下来进入正题。首先是最顶层的优先级：

• 使用!important的声明优先级最高。
• 内联样式中的声明其次。
• 内部样式、外部样式中的声明再次。
• 通过继承获得的声明最次。

为什么内部样式和外部样式的声明放在一起说呢，因为它们都是用了选择器来给dom元素施加样式的，它们应用同一套优先级计算规则。

我们在日常编程中，经常会遇到一个规则集的选择器部分由多个选择器组成，比如：

<style>
  #header .nav li>a {
    color: red;
  }
  .nav-item>a {
    color: blue;
  }
</style>

<div id="header">
  <ul class="nav">
    <li class="nav-item">
      <a>导航1</a>
    </li>
  </ul>
</div>

如果一个标签元素同时被多个规则集匹配，且其中出现同样的属性时，该如何确定优先级呢？

首先看一张表：

选择器	权重	代码
标签选择器	1	div{}
类选择器	10	.text{}
伪类选择器	10	:hover{}
伪元素选择器	10	:first-line{}
属性选择器	10	[value]{}
id选择器	100	#text{}

内联样式中的声明权重是1000，继承的声明权重是0。

对于上面例子中两个规则集中哪个color声明的优先级高，需要计算它们各自选择器的权重。计算如下：

#header .nav li>a = 100 + 10 + 1 + 1 = 112
.nav-item>a = 10 + 1 = 11

注意，10个标签选择器的权重比1个类选择器的权重低。

可以看出来，声明的权重计算规则就是将其所在规则集的选择器列表中所有选择器对应的权重加起来。那么这里显然#header .nav li>a的权重更高，所以文字最终为红色。

如果两个规则集的权重相同，那么根据就近原则。

知道了css优先级计算规则后，再遇到样式覆盖问题，就能比较好地切入解决了。