谁动了我的选择器?深入理解CSS选择器优先级

Posted 星期一研究室

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了谁动了我的选择器?深入理解CSS选择器优先级相关的知识,希望对你有一定的参考价值。

😏序言

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

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

在没有看书之前,我对这些内容的想法可能是这样的:

因此,写下这篇文章,总结关于 CSS 选择器中的优先级。一起来学习⑧~💡

🧐文章内容抢先看

在开始讲解本文之前,我们先用一张思维导图来了解本文的结构内容。详情见下图👇

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

🤐一、基础知识

1、为什么CSS选择器很强

  • 传统编程语言讲求逻辑清晰,层次分明,并且主要为功能服务。
  • CSS 却是为样式服务的,它重表现轻逻辑,如同人的思想一样,相互碰撞才能产生火花。
  • 对于 CSS 选择器来说,它作为 CSS 世界的支柱,其作用好比人类的脊柱,与 html 结构、浏览器行为、用户行为以及整个 CSS 世界相互依存、相互作用,这必然会产生很多碰撞,使得 CSS 选择器变得非常强悍。

2、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 ,主要作用是用来避免冲突

比如说,我们在 htmlsvg 中都会用到 <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;
    }
    

    这样做的唯一缺点就是,增加了 svga 元素的优先级。但是再大多数的情况下,对我们的开发基本上没什么影响。

所以呢,对于 css 选择器的命名空间,大家可以选择了解即可,至少在遇到大规模冲突场景下,给自己多一个解决方法~

😲二、CSS选择器的优先级

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

1、优先级规则概览

(1)选择器优先级

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

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

(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;
}

2、优先级计算

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

(1)选择器优先级计算

我们用一个表格来罗列处常见的一些计算。当然,大家也可以拿起小本本边看边进行计算。具体如下表:

选择器计算值计算细则
*{ }01个0级通配选择器,优先级数值计算结果为0
p { }11个1级通配选择器,计算结果为1
ul > li { }22个1级标签选择器,1个0级选择符,计算结果为1+0+1
li > ol + ol { }33个1级标签选择器,2个0级选择符,计算结果为1+0+1+0+1
.foo { }101个2级类名选择器,计算结果为10
a:not([rel=nofollow]) { }111个标签选择器,1个0级否定伪类,1个2级属性选择器,计算结果为1+0+10
a:hover { }111个1级标签选择器,1个2级伪类,计算结果为1+10
ol li.foo { }122个1级标签选择器,1个2级类名选择器,1个0级空格选择符,计算结果为1+0+1+10
li.foo.bar { }211个1级标签选择器,2个2级类名选择器,计算结果为1+10+10
#foo { }1001个3级id选择器,计算结果为100
#foo .bar p { }1111个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] {

}

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

🥳三、结束语

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

讲到这里,关于 css 选择器优先级的讲解就结束啦!希望对大家有帮助~

🐣彩蛋 One More Thing

🏷️往期推荐&参考资料

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

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

🏷️番外篇

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

以上是关于谁动了我的选择器?深入理解CSS选择器优先级的主要内容,如果未能解决你的问题,请参考以下文章

谁动了我的特征?——sklearn特征转换行为全记录

Flutter布局指南之谁动了我的Key

谁动了我的思想

用过留痕,谁动了我的档案?

用过留痕,谁动了我的档案?

使用ftrace定位“谁动了我的内核日志”