CSS选择器的优先级顺序是怎样的呢？

[JCHappytime]

前言

在我们日常编写CSS的时候，都会有一个疑惑就是：CSS选择器的优先级问题。我们先来看一小段代码：

.text-size {
  font-size: 15px !important;
}

这个时候，!important是具有最高优先级的，而且相比较内联的样式而言，它的优先级会更高。那么除了!important之外的其他选择器呢？

CSS选择器

我们把选择器的名称以及权重列出来看一下。

选择器名称	权重
内联样式	1000
ID选择器	100
类选择器（包括属性选择器和伪类）	10
标签和伪元素选择器	1
组合符和通配符	0

根据表中给出来的权重值，对于我们在编写CSS的时候就会有一个比较明确的顺序了：

.text-box > span {
  height: 100px;    // 权重值=10+1=11（类选择器+标签）
}

.text-box span:last-child {
  font-size: 18px;   // 权重值=10+10+1=21（类选择器+伪类+伪元素选择器）
}

.text-box div>span:first-child {
  color: red;   // 权重值=10+10+1+1=22（类选择器+标签+标签+伪元素选择器）
}