极度投入,深度沉浸,边界清晰
前端小菜鸡一枚,分享的文章纯属个人见解,若有不正确或可待讨论点可随意评论,与各位同学一起学习~
选择器 | 格式 | 优先级权重 |
---|---|---|
id 选择器 | #id | 100 |
类选择器 | .classname | 10 |
属性选择器 | [title=“one”] | 10 |
伪类选择器 | div:hover | 10 |
标签选择器 | div | 1 |
伪元素选择器 | input::after | 1 |
子选择器 | ul>li | 0 |
后代选择器 | li a | 0 |
通配符选择器 | * | 0 |
https://developer.mozilla.org/zh-CN/docs/Web/CSS/Specificity
即 ID 选择器权值为 100,类选择器权值为 10,标签选择器权值为 1,当一个选择器由多个 ID 选择器、类选择器或标签选择器组成时,则将所有权值相加,然后再比较权值。
有问题的
。110 > 100
,应该应用前者的样式,然而事实是应用后者的样式。11 个均为类选择器,所以其实总权值最多不能超过100
,你可以理解为99.99
,所以最终应用 id 选择器的样式。*{} 是通配选择符,表示 (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) ......
https://www.w3.org/TR/selectors/#specificity
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> html,body{ width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } .e { width: 200px; height: 200px; display: flex; justify-content: center; align-items: center; border: 1px solid gray; border-radius: 20px; } #id { color: blue; } /* #id => 100 */ .f .t .th .fo .fi .s .se .ei .n .te .e h2{ color: red; } /* .f .t .th .fo .fi .s .se .ei .n .te .e => 99.99 */ /* .f .t .th .fo .fi .s .se .ei .n .te .e h2 => 99.99 + 1 => 100.99*/ </style> </head> <body> <div class="f"> <div class="t"> <div class="th"> <div class="fo"> <div class="fi"> <div class="s"> <div class="se"> <div class="ei"> <div class="n"> <div class="te"> <div class="e" id="id"> <h2>eleven</h2> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> <!-- 举一反三: 上述例子的原因说到了同级选择器的权重不会超过 100,那在后面再拼接一个标签选择器呢? /* .f .t .th .fo .fi .s .se .ei .n .te .e h2 => 99.99 + 1 => 100.99*/ 此时,11 个类选择器 + 标签选择器 的权重 > id 选择器,则应用 11 个类选择器 + 标签选择器 的样式 -->
Q:(question)
R:(result)
A:(attention matters)
D:(detail info)
S:(summary)
Ana:(analysis)
T:(tips)