一、css样式的优先规则
1、最近的祖先样式比其他祖先样式优先级高。
2、"直接样式"比"祖先样式"优先级高。
二、选择器的优先级
首先,我们需要知道有哪些选择器:
1)ID 选择器, 如 #id{}
2)类选择器, 如 .class{}
3)属性选择器, 如 a[href="segmentfault.com"]{}
4)伪类选择器, 如 :hover{}
5)伪元素选择器, 如 ::before{}
6)标签选择器, 如 span{}
7)通配选择器, 如 *{}
3、内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器
4、当一个标签同时被多个选择符选中,我们便需要确定这些选择符的优先级。我们有如下规则:计算选择符中 ID 选择器的个数(a),计算选择符中类选择器、属性选择器以及伪类选择器的个数之和(b),计算选择符中标签选择器和伪元素选择器的个数之和(c)。按 a、b、c 的顺序依次比较大小,大的则优先级高,相等则比较下一个。若最后两个的选择符中 a、b、c 都相等,则按照"就近原则"来判断。
5、属性后插有 !important 的属性拥有最高优先级。若同时插有 !important,则再利用规则 3、4 判断优先级。