CSS选择器优先级的权值与计算

选择器权值

标签选择器：权值为1

类选择器和伪类：权值为10

ID选择器：权值为100

通配符选择器：权值为0

行内样式：权值为1000

当权值相同时，遵循就近原则。

实验案例：

<p>派生选择器优先级</p>
 <div id="test1">
 <h1>CSS样式优先级</h1>
 <p id="test2">所谓<b>CSS优先级</b>
,是指CSS样式在浏览器中被解析的先后顺序</p>
 <div>权值相同，就近原则；权值不同，哪个权重高，使用哪个。</div>
</div>

两组权重相同的选择器：

#test1 p b{color:red;}
div #test2 b{color:gray;}

权重计算：

div #test2 b{color:gray;}

1+100+1=102

#test1 p b{color:red;}

100+1+1=102

遵循就近原则，采用div #test2 b{color:gray;}的样式。“CSS优先级”显示为灰色。

倘若选择器为以下方式：

#test1 p b{color:red;}
#test2 b{co