CSS选择器是如何确定优先级的?

先看下面的示例

<div id="content">
    <p id="title">Hello world</p>
</div>

有如下的2个css选择器

#title { color: red; }

#content p { color: blue; }

他们都是设置 p 标签内字体的颜色，哪个会生效呢？

这就涉及到了css选择器优先级的积分规则

css为选择器设置了4个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越

可以把它看成一个4位数：0.0.0.0，数值越大的优先级越高

例如: 0.1.0.0 > 0.0.1.2

各种选择器的具体分值

行内样式(style属性定义的样式)

1,0,0,0

ID选择器(#ID)

0,1,0,0

类选择器(.classname)、属性选择器([attr=val])、伪类选择器(:link)

0,0,1,0

元素（类型）选择器(HTML标签)

0,0,0,1

通用元素选择器(*)、伪类:not选择器、连接符(>)

0,0,0,0

示例

（1）ul#nav li.active a

包含3个元素选择器，1个ID选择器，1个类选择器

0,0,0,3

0,1,0,0

0,0,1,0

各位相加后，结果为

0,1,1,3

（2）#footer *:not(nav) li

包含1个ID选择器，1个通用元素选择器，一个伪类:not选择器，2个元素选择器

0,1,0,0

0,0,0,0

0,0,0,0

0,0,0,2

各位相加后，结果为

0,1,0,2

（3）html > body div [id="testid"] ul li > p

6个元素选择器，1个属性选择器，2个连接符

0,0,0,6

0,0,1,0

0,0,0,0

0,0,0,0

各位相加后，结果为

0,0,1,6