一、固定的优先级:

CSS选择器的优先级(从上至下,依次递减,权重值相同另考虑):

选择器权重
!important Infinity,“无穷大”(无法被超越)
行内样式(style=“”)1000
id选择器(#id)100
类选择器(.className)10
属性选择器(a[rel="external"])10
伪类选择器(a:hover,li:nth-child)10
标签选择器(div,h1,p)1
伪元素选择器1
子选择器、相邻选择器0
通配符选择器(*)0

注意:如果选择器的权重相同,优先级以代码出现的先后顺序,后出现的选择器样式为最终样式。通过js控制的样式也是最终样式。

二、变化的优先级:

相邻选择器(h1+p)
子选择器(ul>li)
后代选择器(li a)

判断优先级,以权重为指标,权重越大优先级越高:

一般约定 id选择器的权重为100,类选择器权重为10,标签选择器权重为1。

一个复杂的选择器的权重等于所有选择器的权重之和。

在后代选择器中其权重值达到了100+1=101超过了id选择器,所以可以排到id选择器之前。

!important的优先级虽然是最高的,不过如果出现相同的!important,那么就会再次对比选择器的优先级谁高,决定最终使用哪个样式。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐