CSS中多个class的优先级

在网页中为元素添加样式时，经常会用到多个 class 属性。

那他们之间的优先级关系是怎样的呢：
当一个元素指定多个 class 时，class 的优先级与指定顺序无关，而是和 class 的定义顺序有关。后声明的优先级高。

---

比如一个按钮，我们写的通用属性是：

.bt {
	border: 1px solid;
	border-radius: 5px;
	box-sizing: border-box;
	background-color: white;
}

也就是说我们的按钮默认是上面的样式。如果我们现在有一个特殊的按钮，我们希望背景颜色是红色，其他样式属性不变，我们可以再定义一个 special 。

.special{
	background-color: red;
}

这样我们在指定元素的 class 属性时，如何确定 special 的样式会覆盖 bt 的样式呢。

我在一开始写的时候，我是这样指定的：

<button class="bt special">按钮</button>

但是并没有覆盖之前的，然后我就修改了顺序：

<button class="special bt">按钮</button>

然后发现仍没有覆盖，然后在网上查了一下，当一个元素指定多个 class 时，class 的优先级与指定顺序无关，而是和 class 的定义顺序有关。

然后看了一下我的 css 文件，果然我的 bt 定义在 special 之后，然后我把 他俩的顺序换了一下，special 就可以覆盖 bt 中的样式属性了。

所以，我们在定义样式属性时，一定要把最基础的放在最前面，这样当有特殊的要求时，就可以覆盖之前的属性。