css选择器优先级详解

css选择器优先级详解

1.简单的记忆来说：css的选择器的优先级为：

内联 > id > 类 = 属性 = 伪类 > 标签 = 伪元素

2.从浏览器的算法层面上来说，他们的计算规则如下：

优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：

1.如果存在内联样式，那么 A = 1, 否则 A = 0;
2.B 的值等于 ID选择器 出现的次数;
3.C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4.D 的值等于 标签选择器 和 伪元素 出现的总次数 。

演示：

#nav > ul >li > a.nav_link {
	。。。
}

用上面的公式计算：

A=0;
B=1;
C=(1+0+0) = 1;
D=(3+0) = 3;
简记为：& = （0, 1, 1, 3)

比较优先级的方法也很简单：

算出上面的一个abcd组成的四维集合，从前往后依次比较，谁先大谁就高，当完全一样时，后面的会覆盖前面的

当然有一种特殊情况是，用样式表中的样式覆盖内联样式，只需要在样式的后面添加！important就好。