CSS选择器优先级是指,当多个CSS规则应用在同一个节点上时,哪一条规则具有更高的权重,从而被应用于该节点。
选择器的优先级由四个组成部分计算:
特异度(specificity) !important声明 顺序(order) 继承(inheritance)
特异度指的是选择器的特殊程度,是一个用于区分不同选择器之间权重的值。通常来说,ID选择器的特异度最高,类选择器和属性选择器次之,标签选择器的特异度最低。例如,div
选择器的特异度为0,.header
选择器的特异度为10,#logo
选择器的特异度为100。
如果出现了!important声明,那么该规则会覆盖其他规则,无视特异度和顺序。
顺序指的是CSS规则的顺序,后面的规则会覆盖前面的规则。例如:
.sidebar { color: red; } .sidebar { font-size: 16px; }
最终应用在.sidebar
节点上的样式是字体大小为16像素的样式。
继承指的是某些属性会从父元素继承,如果某些属性没有被直接应用在某个节点上,那么浏览器会在父节点上查找该属性的值。因此,继承的属性往往会被多个选择器所共享。
总结一下,选择器的优先级从高到低分别是:
!important声明 >特异度高的选择器 >顺序靠后的规则 >继承的样式