10-08 10:42 阅读 83

面试官：说下CSS选择器优先级

前端面试中关于CSS选择器的问题三连：

说一下CSS的选择器有哪些
优先级是怎样的
权重计算方式

多数人的回答是这样的：

CSS选择器包括行内样式、id选择器、class选择器、标签选择器，优先级依次降低，!important可用于优先级提升，比行内样式优先级还要高，权重的计算依次为1000,100,10,1，!important的优先级为正无穷。

但实际上，1000,100,10,1不是十进制中的1000,100,10,1，而是进制数，不是2进制，不是10进制，而是256进制，就是0到255后+1才是1，比如通配符的权重为0，伪元素的权重为1，中间相差了255，依次类推。

并且，!important的权重虽然为正无穷，但也是可以计算的，比如正无穷+1或者*2就比正无穷大，原因是计算机中的正无穷是有界的，不是数学上无界的概念。

CSS选择器类型

样式类型

行内样式：<style></style>

内联样式：<div style="color:red;">

外部样式：<link>或@import引入

选择器类型

id选择器、class选择器、属性选择器、*、伪类选择器、伪元素、后代选择器、子类选择器、兄弟选择器

权重计算规则

第一优先级：!important会覆盖页面内任何位置的元素样式
1.内联样式，如style="color: green"，权值为1000
2.ID选择器，如#app，权值为0100
3.类、伪类、属性选择器，如.foo, :first-child, div[class="foo"]，权值为0010
4.标签、伪元素选择器，如div::first-line，权值为0001
5.通配符、子类选择器、兄弟选择器，如*, >, +，权值为0000
6.继承的样式没有权值

比较规则

1.1000 > 0100，从左向右逐个比较，前一级相等才能往后比较
2.无论是行内样式、内部样式还是外部样式，都是按照以上提到的权重方式进行比较，面试的时候遇到优先级比较，答案往往是：行内>id>class>元素(标签)，我们以为给了能令面试官满意的答案，其实不然，比如对同一个元素操作，在权重相等的情况下，后面的样式会覆盖前面的，这样我们给出来的答案就不成立了
3.权重相同的情况下，位于后面的样式会覆盖前面的样式
4.通配符、子选择器、兄弟选择器，虽然权重为0000，但是优先于继承的样式

p {color: yellowgreen} /* 0,0,0,1 */ .para {color: red} /* 0,0,1,0 */ .inner p {color: pink} /* 0,0,1,1 */ .main p[class*="para"] {color: rgb(0, 255, 115)} /* 0,0,2,0 */ /*权重相同，后者覆盖前者*/ .main p[class="para1"] {color:teal} /* 0,0,2,0 */ div.main p[class="para2"]{color: blueviolet;} /* 0,0,2,1 */ .inner p:nth-child(4) {color: cornflowerblue !important;} /*0,0,2,0, !important提升优先级*/ 复制代码

样式呈现的效果如下：

完整代码如下：

<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <style>         * {             padding: 0;             margin: 0;             font-size: 24px;         }         .main {             position: absolute;             top: 50%;             left: 50%;             transform: translate(-50%, -50%);         }         p {color: yellowgreen} /* 0,0,0,1 */         .para {color: red} /* 0,0,1,0 */         .inner p {color: pink} /* 0,0,1,1 */         .main p[class*="para"] {color: rgb(0, 255, 115)} /* 0,0,2,0 */ /*权重相同，后者覆盖前者*/         .main p[class="para1"] {color:teal} /* 0,0,2,0 */         div.main p[class="para2"]{color: blueviolet;} /* 0,0,2,1 */         .inner p:nth-child(4) {color: cornflowerblue !important;} /*0,0,2,0, !important提升优先级*/     </style> </head> <body>     <div>         <div id="app" >             <p style="color: red;">我是红色的，内联样式生效</p>             <p>离离原上草，</p>             <p>一岁一枯荣。</p>             <p>野火烧不尽，</p>             <p>春风吹又生。</p>         </div>     </div> </body> </html>

作者：卷帘依旧
链接：https://juejin.cn/post/6844904159305531406