金融企业网站源码,广东事业单位网站,北京网站设计制作招聘网,网站做优化效果怎么样深入理解CSS选择器优先级#x1f60f;序言#x1f9d0;文章内容抢先看#x1f910;一、基础知识1、为什么CSS选择器很强2、CSS选择器的一些基本概念#xff08;1#xff09;4种基本概念Ⅰ. 选择器Ⅱ. 选择符Ⅲ. 伪类Ⅳ. 伪元素#xff08;2#xff09;CSS选择器的命名空… 深入理解CSS选择器优先级序言文章内容抢先看一、基础知识1、为什么CSS选择器很强2、CSS选择器的一些基本概念14种基本概念Ⅰ. 选择器Ⅱ. 选择符Ⅲ. 伪类Ⅳ. 伪元素2CSS选择器的命名空间二、CSS选择器的优先级1、优先级规则概览1选择器优先级2选择器说明2、优先级计算1选择器优先级计算2“后来居上”原则3提升优先级的小技巧三、结束语彩蛋 One More Thing️往期推荐参考资料️番外篇序言
在前端的面试中有一道很普遍的题目就是CSS选择器的优先级。原来周一觉得这个东西好像蛮简单的就是认知里面的类选择器、id选择器和标签然后就没了。但是殊不知很多时候我们都输给了“我以为”事实证明一切内容并没有想象中的那么简单。
当我看完书的时候才发现优先级需要通过计算来确定然后呢还有通配选择器、选择符和逻辑组合伪类等等各种类型的计算。
在没有看书之前我对这些内容的想法可能是这样的 因此写下这篇文章总结关于 CSS 选择器中的优先级。一起来学习⑧~
文章内容抢先看
在开始讲解本文之前我们先用一张思维导图来了解本文的结构内容。详情见下图 接下来开始进入本文的讲解~
一、基础知识
1、为什么CSS选择器很强
传统编程语言讲求逻辑清晰层次分明并且主要为功能服务。但 CSS 却是为样式服务的它重表现轻逻辑如同人的思想一样相互碰撞才能产生火花。对于 CSS 选择器来说它作为 CSS 世界的支柱其作用好比人类的脊柱与 HTML 结构、浏览器行为、用户行为以及整个 CSS 世界相互依存、相互作用这必然会产生很多碰撞使得 CSS 选择器变得非常强悍。
2、CSS选择器的一些基本概念
14种基本概念
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 等。
2CSS选择器的命名空间
CSS 选择器中还有一个命名空间的概念。所谓命名空间就是我们平常所看到的 namespace 主要作用是用来避免冲突。
比如说我们在 html 和 svg 中都会用到 a 链接这个时候就很可能会发生冲突。那问题来了冲突制造了又该怎么解决呢这个时候就可以用刚刚提到的命名空间 namespace 来解决。
我们来看一段代码更直观的了解命名空间。具体代码如下
p这是文字:a点击刷新/a
/p
p这是SVG:svga xlink:hrefpath dM433.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 选择器的命名空间大家可以选择了解即可至少在遇到大规模冲突场景下给自己多一个解决方法~
二、CSS选择器的优先级
几乎所有的 css 样式冲突、样式覆盖等等问题都跟 css 声明的优先级错位脱不开关系。接下来我们将从 css 优先级规则以及优先级的计算为切入点来了解关于 css 选择器的优先级。
1、优先级规则概览
1选择器优先级
css 优先级有着明显的不可逾越的等级制度因此我们可以将其划分为 0~5 这 6 个等级。其中前4个等级由 css选择器 决定后2个等级由 书写形式 和 特定语法 决定。 下面来了解这6种等级制度各自的区别具体如下表
等级定义计算值0级通配选择器、选择符和逻辑组合伪类01级标签选择器12级类选择器、属性选择器和伪类103级ID选择器1004级style属性内联10005级!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 stylecolor: #ccc;优先级
/span5级! important
/* !important是顶级优先级可以重置 js 设置的样式唯一推荐使用的场景就是使 js 设置无效切勿滥用*/
#container {color: #999 !important;
}2、优先级计算
上面我们了解到了关于 css 选择器的各种玩法那下面我们就来看一下它是怎么玩的。
1选择器优先级计算
我们用一个表格来罗列处常见的一些计算。当然大家也可以拿起小本本边看边进行计算。具体如下表
选择器计算值计算细则*{ }01个0级通配选择器优先级数值计算结果为0p { }11个1级通配选择器计算结果为1ul li { }22个1级标签选择器1个0级选择符计算结果为101li ol ol { }33个1级标签选择器2个0级选择符计算结果为10101.foo { }101个2级类名选择器计算结果为10a:not([relnofollow]) { }111个标签选择器1个0级否定伪类1个2级属性选择器计算结果为1010a:hover { }111个1级标签选择器1个2级伪类计算结果为110ol li.foo { }122个1级标签选择器1个2级类名选择器1个0级空格选择符计算结果为10110li.foo.bar { }211个1级标签选择器2个2级类名选择器计算结果为11010#foo { }1001个3级id选择器计算结果为100#foo .bar p { }1111个3级id选择器1个2级类名选择器1个1级标签选择器2个0级空格选择器计算结果为10010100
2“后来居上”原则
还有一种可能会出现的情况就是遇到计算结果相同的我们该如何取值呢比如
html lang“zh-CN”body classfoo颜色是/body
/htmlstylebody.foo:not([dir]) {color: red;}html[lang] .foo {color: blue;}
/style我们来分析下以上这段代码。首先第一段 css 代码中出现1个标签选择器 body 1个类名选择器 .foo 和1个否定伪类 :not 以及1个属性选择器 [dir] 。因此计算结果为 110010 也就是 21 。
我们再来分析第二段代码 html[lang] .foo 中出现1个标签选择器 html 1个属性选择器 [lang] 1个类名选择器 .foo 这里 0级选择器 忽略不计。因此最终计算结果为 1101021 。
所以大家可以看到两个最终的计算结果都是 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再走哦~以上就是本文的全部内容我们下期见
