淘先锋技术网

首页 1 2 3 4 5 6 7

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声明 >特异度高的选择器 >顺序靠后的规则 >继承的样式