龙空技术网

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

爱做梦的程序员 90

前言:

此时我们对“css选择器权重计算方式”大概比较看重,各位老铁们都需要分析一些“css选择器权重计算方式”的相关内容。那么小编同时在网络上收集了一些有关“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",权值为10002.ID选择器,如#app,权值为01003.类、伪类、属性选择器,如.foo, :first-child, div[class="foo"],权值为00104.标签、伪元素选择器,如div::first-line,权值为00015.通配符、子类选择器、兄弟选择器,如*, >, +,权值为00006.继承的样式没有权值比较规则1.1000 > 0100,从左向右逐个比较,前一级相等才能往后比较2.无论是行内样式、内部样式还是外部样式,都是按照以上提到的权重方式进行比较,面试的时候遇到优先级比较,答案往往是:行内>id>class>元素(标签),我们以为给了能令面试官满意的答案,其实不然,比如对同一个元素操作,在权重相等的情况下,后面的样式会覆盖前面的,这样我们给出来的答案就不成立了3.权重相同的情况下,位于后面的样式会覆盖前面的样式4.通配符、子选择器、兄弟选择器,虽然权重为0000,但是优先于继承的样式

css复制代码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提升优先级*/

样式呈现的效果如下:

完整代码如下:

xml复制代码<!DOCTYPE html><html lang="en"><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 class="main">        <div id="app" class="inner" >            <p style="color: red;">我是红色的,内联样式生效</p>            <p class="para1">离离原上草,</p>            <p class="para2">一岁一枯荣。</p>            <p class="para3">野火烧不尽,</p>            <p class="para4">春风吹又生。</p>        </div>    </div></body></html>

作者:卷帘依旧

链接:

标签: #css选择器权重计算方式 #css选择器的优先级排序 #css属性优先级 #css引入方式的优先级 #css选择器有哪四种类型各举一个对应的选择器名称