CSS选择器的权重及优先级

r囧r小猫 2022-05-30 05:40 353阅读 0赞

最近在牛客网上刷题遇到过各类选择器优先级的比较问题，经查阅，现总结如下：

总体来说：内联样式 > id>class=属性选择器=伪类选择器=伪元素选择器>标签，大致分为四个等级：

一等：代表内联样式，如: style=””，权值为1000；

二等：代表ID选择器，如：\#content，权值为100；

三等：代表类，伪类和属性选择器，如.content，权值为10；

四等：代表类型选择器和伪元素选择器，如div p，权值为1；

下图是一些计算实例：

![priority_rules_2.jpg][]

注意：通用选择器（\*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。

我们再来看一个具体的例子：假如有以下样式规则，判断HTML代码中的两个标题是什么颜色？

#content div#main-content h2{
    	color:red;
    }
    
    #content #main-content>h2{
    	color:blue
    }
    body #content div[id="main-content"] h2{
    	color:green;
    }
    
    #main-content div.paragraph h2{
    	color:orange;
    }
    #main-content [class="paragraph"] h2{
    	color:yellow;
    }
    div#main-content div.paragraph h2.first{
    	color:pink;
    }

以下是HTML代码：

<div id="content">
    	<div id="main-content">
    		<h2>CSS简介</h2>
    		<p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。</p>
    		<div class="paragraph">
    			<h2 class="first">使用CSS布局的优点</h2>
    			<p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.</p>
    		</div>
    	</div>
    </div>

答案是：两个标题都是红色的！

让我们来一起算算六个样式规则各自的特殊性的值：

*  第一个特殊性的值=2\*100+2\*1=202
 *  第二个特殊性的值=2\*100+1=201
 *  第三个特殊性的值=1\*100+1\*10+2\*1=112
 *  第四个特殊性的值=1\*100+1\*10+1\*1=111
 *  第五个特殊性的值=1\*100+2\*10+3\*1=123

清楚了吧，第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军，后面一些规则虽然看起来好像更复杂，但特殊性并不是拼谁的选择器表达式写得更长，ID选择器才是王道！

这里使用图文的形式，讲解各个选择器的权重及优先级规则的使用，直观且容易理解，希望对大家有所帮助！

参考：http://www.nowamagic.net/csszone/css\_SeletorPriorityRules.php

[priority_rules_2.jpg]: http://www.nowamagic.net/csszone/images/priority_rules_2.jpg