标记选择器，类选择器，id选择器，伪类选择器的优先级顺序

Posted 2023-05-10

选择器的优先级顺序

id 级别最高

其次是伪类

然后是类

最低的是元素

下图实例：请看红圈位置不管代码插入的顺序在第几行，他都会按照我数字标注的顺序执行

同类别选择器执行顺序

在我们布局的时候，很常用的就是，一个div使用了多个类，他到底会优先执行那个呢？

我分别设置了三个类：

30行.aaa背景红色

31行.bbb背景黄

32行.ccc背景蓝

执行结果

优先执行了蓝色，我们在调换下代码顺序看看

30行.ccc背景蓝

31行.bbb背景黄

32行.aaa背景红

执行结果

从以上测试我们得出，在设置同一类选择器的情况下，优先级是以代码插入顺序有关的，越靠后的优先级就越高。

原因：在浏览器加载的过程中，是以从上到下的顺序执行的，在加载到最后一个的时候会把之前的替换掉

参考技术A 首先说下曾经踩过的坑,p:nth-child(1) 匹配的是任何元素的第一子元素p ,(之前把它理解成p下的一个元素)
p:nth-of-type(1) 匹配的是任何元素的所有子元素的第一个p

<div>
<p>3</p>
<span>4</span>
<p>5</p>
<span>6</span>
</div>
p:nth-child(1) 匹配3，如果要匹配第一span 只能是 span:nth-of-type

谈到CSS选择器可能大家最熟悉与常用的就是 标签、id、class选择器了，从效率上来说它们三个无疑最高的选择，我们确实也应优先使用，但在实际开发中，我们可能还有一些友好的选择器，下面列举一些常用css选择器（注意只包括常用有代表性的选择器，部分少用的未列举）：
1、基本选择器，效率最高; id 、class、标签、* 通用选择器
2、组合选择器，效率相对来基本选择器来说较低，‘h1,p多类’、‘div p后代’、‘div>p子’、‘div~p 同级’、‘div+p相邻（div同级的后一个元素）’选择器
3、属性选择器，效率相对来说又低一层，E[arr]、E[att^=”val”]、E[att$=”val”]、E[att*=”val”]
4、伪类选择器，效率最低，:hover :active :focus :first-child :checked :enabled :nth-child(n) :nth-of-type(n)
(E:after E:before E:first-letter E:first-line伪元素）
选择器优性能及优化详见 ：http://blog.sina.com.cn/s/blog_60bbe8e901011veg.html ,里面写得相当详细(包括CSS解析 )，感谢博主！！！

下面着重介绍选择器优先级，我们都是站在巨人的肩膀上做了一些自己的见解，帮助大家更好的理解它
之前看了网上的其它一些博客，感觉讲得都很繁琐，计算什么权重，感觉都挺官方的，我在这里介绍一些常见的、通俗易懂的方法，

<div class="min-screen" id="test" data-index="tt"></div>

优先级 行内style>id>class>标签， 这是网上博客中一些比较常见的
1、important，大家都知道它的优先级最高，但我在class和id选择器中都设置它，则浏览器会使用哪个呢（答案是 id），在important存在的情况下，它会跳过important，从优先级表从下往下比，找到class与id 并比较优先级
2、

div
background-color: red;

body div
background:black;


背景色是black
3、
.min-screen
background-color: green;

#test
background: blue;

div[data-index='tt']
background:yellow;


显示yellow
4、

.min-screen
background-color: green;

div[data-index='tt']
background:yellow;

div:nth-child(1)
background:palegreen;

显示palegreen， 当加上 #testbackground: blue; ，则显示blue

5、

.min-screen
background-color: green;

#test
background: blue;

.min-screen:hover
background:pink ;

当鼠标移动到div上的时候并不会显示 pink（因为id比class优先级更高），当改为#test:hoverbackground:pink ; 时候则会显示pink

还有很多组合，和一些其它情况，在这里我把一些常用的列举出来，感兴趣的可以自己组合选择器再研究

div
width:200px;
height:200px;
background-color: red;

.min-screen
background-color: green;

#test
background: blue;


div[data-index='tt']
background:yellow;

div:hover
background:pink ;

div:nth-child(1)
background:palegreen;

div:last-child
background:#f0ad4e;

body div
background:black;

*
background:violet;

p:nth-of-type(1)
color:red;


总结:
1、优先级：important>行内style>id>结构性伪类（eg :nth-child() ：nth-of-type()）>属性>类>标签>通用
2、伪类：hover它的优先级还和最前面的关键字有关（会先比较关键字优先级），上面第五点有详细说明
3、精确匹配优先级更高，上面第二点有说明
4、important凌驾于一切之上（尽量少使用），当两个选择器都存在它时，则比较选择第下个优先级高的，上面第一点有说明
5、动态编写css,在.css文件中所有的属性都无法传参编写，可在html 的head中建立style标签，通过js动态编写style中的样式 参考技术B 这个东西没有顺序，它的顺序在于你对它放置的位置

#s color:#fff;
.r color:#000;

放置的位置越往下，权重越高
下边的这个颜色就会是黑色
<div id="s" class="r">你好</div>追问

题是这样的:列举你知道的CSS选择器及其用法，并按优先顺序排序。

追答

1.id选择器（#myid）2.类选择器（.myclassname）3.标签选择器（div,h1,p）4.相邻选择器（h1+p）5.子选择器（ul < li）6.后代选择器（li a）7.通配符选择器（*）8.属性选择器（a[rel="external"]）9.伪类选择器（a:hover,li:nth-child）

追问

这个排序是根据什么呢？

参考技术C 1、最高级的是标签选择器（就是你说的标记选择器）
2、其次是ID选择器
3、然后是类选择器
注意，如果CSS语句后面有 !important，代表最高优先级

选择器的权重与优先规则

1、权重排比

“important > 内联 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符”

那 么这个顺序是怎么得出来的呢？实际上在CSS2规范关于具体性(specificity)的定义中，描述是非常明确的，但是很多中文版本的css图书中采 用了10进制的简单相加计算方式（包括第一版《CSS权威指南》，第二版中已经纠正）。因此把规范中对CSS层叠优先级的相关定义意译一下，希望给初入门 或对权重计算尚有疑惑的朋友提供一些参考。 根据CSS规范，具体性越明确的样式规则，权重值越高。计算权重值的依据，并不是许多文章所描述的那样“class是10，标签是1，ID是100”之类——虽然这样在大多数情况下能够得到正确的结果。   2、选择器权重值的计算

A：如果规则是写在标签的style属性中（内联样式），则A=1，否则，A=0. 对于内联样式，由于没有选择器，所以B、C、D的值都为0，即A=1, B=0, C=0, D=0（简写为1,0,0,0，下同）； B：计算该选择器中ID的数量。（例如，#header 这样的选择器，计算为0, 1, 0, 0）； C：计算该选择器中伪类及其它属性的数量（包括class、属性选择器等，不包括伪元素）。 （例如，.logo[id=‘site-logo‘] 这样的选择器，计算为0, 0, 2, 0）； D：计算该选择器中伪元素及标签的数量。（例如，p:first-letter 这样的选择器，计算为0, 0, 0, 2）。 CSS2规范中给出的一些例子：     *             {}  /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */     li            {}  /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */     li:first-line {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */     ul li         {}  /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */     ul ol+li      {}  /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */     h1 + *[rel=up]{}  /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */     ul ol li.red  {}  /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */     li.red.level  {}  /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */     #x34y         {}  /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */     style=”"          /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */ 根据这样的定义，所以很多文章简单地把规则归纳为：内联样式的权重值是1000，ID选择器的权重值是100，class选择器的权重值是10，标签选择器的权重值是1. 整条规则中的所有选择器权重值相加得到整个样式规则的权重值，数字越大权重值越高。 大多数情况下，按照这样的理解得出的结论没有问题，但是遇到下面这样的情况就出现问题了：     样式一：body header div nav ul li div p a span em {color: red}     样式二：.count {color: blue} 按照错误的计算方法，样式一的权重值是11，样式二的权重值是10，如果这两条规则用于同一个元素，则该元素应该是红色。实际结果却是蓝色。   3、权重值的比较

       按照四组计算的正确方法，上面例子中的样式一权重值应该是0, 0, 0, 11，样式二的权重值是0, 0, 1, 0。 根据规范，计算权重值时，A,B,C,D四组值，从左到右，分组比较，如果A相同，比较B，如果B相同，比较C，如果C相同，比较D，如果D相同，后定义的优先。 样式二和样式一的A、B相同，而样式二的C大于样式一，所以，不管D的值如何，样式二权重值都大于样式一。这就是正确的答案。   4、特殊的 !important

在按照ABCD四组计算比较之外，在定义样式的时候，还可以对某一个属性应用 !important。对于一直从事编程而没做过重构的人，需要特别注意的是这里的“!”与其在编程语言中的意义刚好相反，不是代表“不重要”而是代表“很重要”。 CSS2规范中规定：!important 用于单独指定某条样式中的单个属性。对于被指定的属性，有 !important 指定的权重值大于所有未用 !important 指定的规则。 例如：     样式一： #header nav ul li.current {color: red; font-weight: bold;}     样式二： li:hover {color: blue !important; font-weight: normal;} 就整条规则而言，样式一的权重值为 0, 1, 1, 3，而样式二的权重值仅为0, 0, 0, 2。所以应用于相同元素时，应该样式一生效。但是对于color这个属性，由 在样式二中用 !important 做了指定，因此color将应用样式二的规则。而font-weight则按照规定用样式一的规则。 如果多条规则中都对同一个属性指定了 !important 呢？这时候 !important 的作用相互抵销，依然按照ABCD四组计算比较。 因此 !important 的作用只有在具有唯一性时才能提现，但是我们永远无法预料自己什么时候又需要覆盖一个已经指定了 !important 的属性，所以最好的办法就是：不要使用 !important。