这是你理解的CSS选择器权重吗？

前言

极度投入，深度沉浸，边界清晰

前端小菜鸡一枚，分享的文章纯属个人见解，若有不正确或可待讨论点可随意评论，与各位同学一起学习~

欢迎关注 『前端进阶圈』 公众号，一起探索学习前端技术......

公众号回复 加群 或 扫码, 即可加入前端交流学习群，长期交流学习......

公众号回复 加好友，即可添加为好友

这是你理解的CSS选择器权重吗？

CSS 选择器

选择器	格式	优先级权重
id 选择器	#id	100
类选择器	.classname	10
属性选择器	[title="one"]	10
伪类选择器	div:hover	10
标签选择器	div	1
伪元素选择器	input::after	1
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

CSS 选择器优先级

!important 例外，优先级最高
内联样式
id 选择器
类选择器，属性选择器，伪类选择器
标签选择器，伪元素选择器
子选择器，后代选择器，通配符选择器
参考 MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity

错误的说法

在学习过程中，你可能发现给选择器加权值的说法，即 ID 选择器权值为 100，类选择器权值为 10，标签选择器权值为 1，当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时，则将所有权值相加，然后再比较权值。
这种说法其实是有问题的。
比如一个由 11 个类选择器组成的选择器和一个由 1 个 ID 选择器组成的选择器指向同一个标签，按理说 110 > 100，应该应用前者的样式，然而事实是应用后者的样式。
原因：选择器的权值不能进位。比如，11个类选择组成的选择器的总权值为 110，但因为 11 个均为类选择器，所以其实总权值最多不能超过100，你可以理解为99.99，所以最终应用 id 选择器的样式。

选择器权重

W3C: 就是把 ID 选择器当作 A ，把类选择器、属性选择器、伪类选择器当作 B ，把类型选择器(标签选择器)、伪元素选择器当作 C 再计算。

如果选择器是一个选择器列表，则累加。

*{} 是通配选择符，表示 (0,0,0)
ul li{} 有两个标签选择器，所以表示 (0,0,2)
ul ol li 有三个标签选择器，表示 (0,0,3)
ul ol li.red 有三个标签选择器和一个类选择器，所以表示 (0,1,3)
:not(em, strong#foo) 有一个ID 选择器和一个标签选择器，所以表示 (1,0,1)
......

参考 W3C: https://www.w3.org/TR/selectors/#specificity

例子

各位看官如果分享的文字有给你增加一点小知识，给个赞再走吧~

文章特殊字符描述：

问题标注 Q:(question)
答案标注 R:(result)
注意事项标准：A:(attention matters)
详情描述标注：D:(detail info)
总结标注：S:(summary)
分析标注：Ana:(analysis)
提示标注：T:(tips)

往期回顾：

最后：

欢迎关注 『前端进阶圈』 公众号，一起探索学习前端技术......
公众号回复 加群 或 扫码, 即可加入前端交流学习群，长期交流学习......
公众号回复 加好友，即可添加为好友

这是你理解的CSS选择器权重吗？

前言

这是你理解的CSS选择器权重吗？

CSS 选择器

CSS 选择器优先级

错误的说法

选择器权重

例子

eleven

各位看官如果分享的文字有给你增加一点小知识，给个赞再走吧~

文章特殊字符描述：

往期回顾：

最后：

你可能感兴趣的:(这是你理解的CSS选择器权重吗？)