谁动了个人选择器？深刻理解CSS选择器优先级

😏序言

在前端的面试中，有一道很广泛的题目，就是CSS选择器的优先级。原来周一以为这个东西好像蛮简单的，就是认知里面的类选择器、id选择器和标签，而后就没了。可是却不知不少时候咱们都输给了“我觉得”，事实证实一切内容并无想象中的那么简单。

当我看完书的时候，才发现优先级须要经过计算来肯定，而后呢，还有通配选择器、选择符和逻辑组合伪类等等各类类型的计算。

在没有看书以前，我对这些内容的想法多是这样的：

所以，写下这篇文章，总结关于 CSS 选择器中的优先级。一块儿来学习⑧~💡

🧐文章内容抢先看

在开始讲解本文以前，咱们先用一张思惟导图来了解本文的结构内容。详情见下图👇

接下来开始进入本文的讲解~

🤐1、基础知识

一、为何CSS选择器很强

• 传统编程语言讲求逻辑清晰，井井有条，而且主要为功能服务。
• 但 CSS 倒是为样式服务的，它重表现，轻逻辑，如同人的思想同样，相互碰撞才能产生火花。
• 对于 CSS 选择器来讲，它做为 CSS 世界的支柱，其做用比如人类的脊柱，与 HTML 结构、浏览器行为、用户行为以及整个 CSS 世界相互依存、相互做用，这必然会产生不少碰撞，使得 CSS 选择器变得很是强悍。

二、CSS选择器的一些基本概念

（1）4种基本概念

CSS选择器能够分为4类，即选择器、选择符、伪类和伪元素。下面介绍这四种类型的区别。

Ⅰ. 选择器

选择器，指的是咱们日常使用的 css 声明块前面的标签、类名等等。好比：

body{
    background: #333;
}
复制代码

以上代码中的 body 就是一种选择器，是类型选择器，也能够称为标签选择器。

---

再好比：

.container{
	background-color: #fff;
}
复制代码

以上代码中的 .container 也是选择器，属于属性选择器中的一种，咱们也常常称它为类选择器。

Ⅱ. 选择符

CSS 中有5种选择符，分别为：

选择符	定义
空格（ ）	表示后代关系
尖括号（>）	表示父子关系
加号（+）	表示相邻兄弟关系
波浪号（~）	表示兄弟关系
双管道（||）	表示列关系

咱们来举些例子，更好的理解这几种选择符。具体代码以下：

/* 后代关系 */
.container img {
    object-fit: contain;
}

/* 父子关系 */
ol > li {
    margin: 0 auto;
}

/* 相邻兄弟关系 */
button + p {
    margin-right: 10px;
}

/* 兄弟关系 */
button ~ p {
    margin-left: 10px;
}

/* 列 */
.col || td {
    background-color: gray;
}
复制代码

这里须要注意的是，相邻兄弟关系和兄弟关系的区别，这两个看起来很类似，很容易混淆。

对于 + 的相邻关系，指的是当前的 button 以及在它同一层级上的下一个元素 p 的样式；而对于 ~ 来讲，就是当前 button 以及在它同一层级上的全部 p 元素的样式。

能够说 + 号是一对一关系，而 ~ 则是一对多关系。

Ⅲ. 伪类

伪类的特征是其前面会有一个冒号 : 。对于伪类来讲，它一般与浏览器行为和用户行为相关联，能够把它当作是 css 世界中的 javascript 。好比：

a:hover{
	color: gray;
}
复制代码

Ⅳ. 伪元素

伪元素的特征是其前面会有两个冒号 :: ，常见的有 ::before 、 ::after 、 ::first-letter 和 ::first-line 等。

（2）CSS选择器的命名空间

CSS 选择器中还有一个命名空间的概念。所谓命名空间，就是咱们日常所看到的 @namespace ，主要做用是用来避免冲突。

好比说，咱们在 html 和 svg 中都会用到 <a> 连接，这个时候就极可能会发生冲突。那问题来了，冲突制造了，又该怎么解决呢？这个时候就能够用刚刚提到的命名空间 @namespace 来解决。

咱们来看一段代码，更直观的了解命名空间。具体代码以下：

<p>
	这是文字:
	<a>点击刷新</a>
</p>
<p>
	这是SVG:
	<svg>
		<a xlink:href>
			<path d="M433.109 23.694c...2.706z"/>
		</a>
	</svg>
</p>
@namespace url(http://w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);
/* 管道符 */
svg|a {
    color: black;
    fill: currentColor;
}
/* 标签选择器 */
a {
    color: gray;
}
复制代码

你们能够看到， svg|a 中有一个管道符 | ，那么管道符前面的字符表示的就是命名空间的代称，而管道符后面的内容则是选择器。这段代码最终的显示效果是这样的：

若是按照咱们预约的，可能有的小伙伴以为样式不是越靠后优先级越高吗，而为何 svg 中的 a 仍是显示了黑色，而不是灰色呢？

其实，你们能够看到上面的命名空间，上述代码中就表示了，在 http://www.w3.org/2000/svg 这个命名空间下全部 <a> 的颜色都是黑色 black ，且因为 xhtml 的命名空间（你们定位到第一个命名空间）也被指定了。所以呢， svg 中的 <a> 标签也就不会受到 标签选择器a 的影响，即使 纯标签选择器a 的优先级再高，那也是无效的。

---

讲到这个，咱们来对 css选择器命名空间 作个小结：

其实， css选择器命名空间 的兼容性很好，至少类似10年前浏览器就支持了。可是呢，确不多有人在项目中去使用它。这是为何呢？

缘由主要有如下两点：

• 在 html 中直接内联 svg 的应用场景相对来讲仍是比较少的，你能够试想一下，咱们日常在引用阿里图标的时候，会直接把svg那一大串资源，给本身引入到本身的页面中吗？应该没有人这么干吧。因此，它更多的是做为独立资源来使用。

• 还有一个缘由就是，有它更好的替代方案。好比：

  svg a{
  	color: black;
  }
  复制代码

  这样作的惟一缺点就是，增长了 svg 中 a 元素的优先级。可是再大多数的状况下，对咱们的开发基本上没什么影响。

因此呢，对于 css 选择器的命名空间，你们能够选择了解便可，至少在遇到大规模冲突场景下，给本身多一个解决方法~

😲2、CSS选择器的优先级

几乎全部的 css 样式冲突、样式覆盖等等问题，都跟 css 声明的优先级错位脱不开关系。接下来，咱们将从 css 优先级规则以及优先级的计算为切入点，来了解关于 css 选择器的优先级。

一、优先级规则概览

（1）选择器权重

css 优先级有着明显的不可逾越的等级制度，所以，咱们能够将其划分为 0~5 这 6 个等级。其中，前4个等级由 css选择器 决定，后2个等级由 书写形式 和 特定语法 决定。 下面来了解这6种等级制度各自的区别，具体以下表：

等级	定义	计算值
0级	通配选择器、选择符和逻辑组合伪类	0
1级	标签选择器	1
2级	类选择器、属性选择器和伪类	10
3级	ID选择器	100
4级	style属性内联	1000
5级	!important	10000

（2）选择器说明

继续，咱们对这6个级别对应的选择器样式来作个简单的了解。具体以下：

0级：通配选择器、选择符和逻辑组合伪类

/* 通配选择器指星号（*） */
* {
    color: #fff;
}

/* ------------------分割线------------------- */

/* 选择符指+、>、~、空格和|| 具体上面有作详细说明，再也不细述 */
.container img {
    /* 后代关系 */
}

ol > li {
    /* 父子关系 */
}

button + p {
    /* 相邻兄弟关系 */
}

button ~ p {
    /* 兄弟关系 */
}

.col || td {
    /* 列 */
}

/* ------------------分割线------------------- */

/* 逻辑组合伪类有:not()、:is()和:where() 须要注意的是，只有逻辑组合伪类的优先级是0，其余伪类的优先级并非这样的 */
:not() {
    color: #fff;
}
复制代码

1级：标签选择器

/* 标签选择器相似于body,p,span,div等等这些标签元素 */
body {
    color: #333;
}
复制代码

2级：类选择器、属性选择器和伪类

/* 类选择器指class */
.container {
    color: #666;
}

/* ------------------分割线------------------- */

/* 属性选择器指指针对某个标签里面的属性进行特定标识 好比如下，表示只对有 href 属性的锚（a 元素）应用样式 */
a[href] {
    color:#666;
}

/* ------------------分割线------------------- */

/* 伪类指:hover等 */
a:hover {
    color: #666;
}
复制代码

3级：ID选择器

#container {
    color: #999;
}
复制代码

4级：style属性内联

<span style="color: #ccc;">
	优先级
</span>
复制代码

5级：! important

/* !important是顶级优先级， 能够重置 js 设置的样式， 惟一推荐使用的场景就是使 js 设置无效（切勿滥用）*/
#container {
    color: #999 !important;
}
复制代码

二、优先级计算

上面咱们了解到了关于 css 选择器的各类玩法，那下面咱们就来看一下它是怎么玩的。

（1）选择器优先级计算

咱们用一个表格来罗列处常见的一些计算。固然，你们也能够拿起小本本边看边进行计算。具体以下表：

选择器	计算值	计算细则
*{ }	0	1个0级通配选择器，优先级数值计算结果为0
p { }	1	1个1级通配选择器，计算结果为1
ul > li { }	2	2个1级标签选择器，1个0级选择符，计算结果为1+0+1
li > ol + ol { }	3	3个1级标签选择器，2个0级选择符，计算结果为1+0+1+0+1
.foo { }	10	1个2级类名选择器，计算结果为10
a:not([rel=nofollow]) { }	11	1个标签选择器，1个0级否认伪类，1个2级属性选择器，计算结果为1+0+10
a:hover { }	11	1个1级标签选择器，1个2级伪类，计算结果为1+10
ol li.foo { }	12	2个1级标签选择器，1个2级类名选择器，1个0级空格选择符，计算结果为1+0+1+10
li.foo.bar { }	21	1个1级标签选择器，2个2级类名选择器，计算结果为1+10+10
#foo { }	100	1个3级id选择器，计算结果为100
#foo .bar p { }	111	1个3级id选择器，1个2级类名选择器，1个1级标签选择器，2个0级空格选择器，计算结果为100+10+1+0+0

（2）“后来居上”原则

还有一种可能会出现的状况就是，遇到计算结果相同的，咱们该如何取值呢？好比：

<html lang=“zh-CN”>
	<body class="foo">颜色是</body>
</html>

<style> body.foo:not([dir]) { color: red; } html[lang] > .foo { color: blue; } </style>
复制代码

咱们来分析下以上这段代码。首先，第一段 css 代码中，出现1个标签选择器 body ，1个类名选择器 .foo 和1个否认伪类 :not ，以及1个属性选择器 [dir] 。所以计算结果为 1+10+0+10 ，也就是 21 。

咱们再来分析第二段代码， html[lang] > .foo 中出现1个标签选择器 html ，1个属性选择器 [lang] ，1个类名选择器 .foo ，这里 0级选择器 忽略不计。所以，最终计算结果为 1+10+10=21 。

因此，你们能够看到，两个最终的计算结果都是 21 。那咱们到底用哪一个样式呢？

印证标题所说的，遵循**“后来居上”原则**， 最终这段代码显示为蓝色。

（3）提高优先级的小技巧

在实际开发中，咱们不免会遇到须要增长 css 选择器优先级的场景。却不知不少小伙伴可能直接就把内联和 !important 直接怼上去了，这样子形成的后果可能有点恐怖了。

因此，咱们须要来了解几种增长选择器权重的作法。具体以下：

假设如今我要给下面这段代码增长权重，例如：

.foo {
	color: #333;
}
复制代码

不少时候咱们的作法多是增长嵌套或者是增长一个标签选择器，例如：

/* 增长嵌套 */
.father .foo {

}

/* 增长标签选择器 */
div.foo {

}
复制代码

可是这种作法每每不是最好的，由于它会增长了代码的耦合度，下降代码的可维护性。试想一下，一旦类名变了，或者标签换了，那你的样式岂不是就要往回去改了，这样会不会就有点不太友好了。

---

因此，咱们引出一下两种方式，来解决这个问题。具体以下：

第一种： 重复选择器自身

.foo.foo {
	
}
复制代码

第二种： 借助已存在的属性选择器

.foo[class] {

}

#foo[id] {

}
复制代码

这样看起来，会不会就友好了许多呢。

🥳3、结束语

在上文中，咱们讲到关于 css 选择器的一些基础知识，以及 css 选择器的优先级的各类计算方式，还有关于“后来居上”原则和一些提高优先级的小tips。

讲到这里，关于 css 选择器优先级的讲解就结束啦！但愿对你们有帮助~

🐣彩蛋 One More Thing

🏷️往期推荐&参考资料

position和z-index👉你可能对position和z-index有一些误解

书籍👉张鑫旭老师的《CSS选择器世界》

🏷️番外篇

• 关注公众号星期一研究室，第一时间关注优质文章，更多精选专栏待你解锁~
• 若是这篇文章对你有用，记得留个脚印jio再走哦~
• 以上就是本文的所有内容！咱们下期见！👋👋👋