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就好。