• 首页
  • 攻略

    • 『已知总数 如何求权重』求加权平均值

    2023-03-02 23:58 18次浏览 攻略

    成长是一辈子的事！大家好！我该问新的了。与前端、python等技术共享个人成长之路。

    CSS层叠性

    什么是层叠性呢？

    我们知道，CSS的全名是"层叠式样式表"，那么层叠性就是它很重要的性质。

    所谓的层叠性，就是指多个选择器可以同时作用于同一个标签，样式效果叠加的特性。

    比如下面这段代码：

    这个p标签，上面有id属性是para，class属性是spec，

    现在分别用标签选择器、class选择器、id选择器给它添加样式，

    用标签选择器p给它添加的样式是字体颜色是红色，

    用class选择器.spec给它添加的样式是字体倾斜，

    用id选择器#para给它添加的样式是文字下面加下划线。

    你会发现这三个选择器的样式，都会同时叠加作用到这个p标签上，相当于一层一层叠加上去的。

    这就是CSS的层叠性。

    层叠性的冲突处理

    如果多个选择器定义的属性样式有冲突，CSS有严密的处理冲突的规则。

    比如还是同一个p标签，它有的id是para，它的class是spec，分别用标签选择器、id选择器、class选择器给这个p标签添加样式，如下面的代码：

    这三种选择器选择的都是这同一个p标签，但是这三种选择器添加的字体颜色分别是红色、绿色、蓝色。

    那么此时这个p标签的文字到底是什么颜色呢？这就冲突了。

    此时，CSS就规定，不同的选择器的权重不同：

    也就是说，当CSS属性样式一旦遇到冲突，效果就不是一层一层叠加上去了，而是根据选择器的权重来确定样式。

    id选择器权重最高，此时这个p标签就是绿色的。

    如果CSS中没有id选择器，那么就给这个p标签确定为class选择器的样式，

    如果CSS中id选择器和class选择器都不存在，那就给这个p标签添加标签选择器定义的属性样式。

    复杂选择器权重计算

    如果选择器非常复杂，那么CSS也有非常严密的计算公式，来计算选择器的权重。

    可以通过id的个数，class的个数，标签的个数来计算选择器的权重。

    如何计算呢？先看下面的代码：

    上面代码的HTML结构，由3个div和一个p标签嵌套组成。每一个div都有一个id属性和一个class属性。

    后面这些美化HTML结构的CSS代码，选择器都是复合选择器。

    我们看到：

    #box1 #box2 p、

    #box1 div.box2 #box3 p、

    .box1 .box2 .box3 p

    这3个选择器指向的都是同一个p标签，

    但是这3个选择器各自给这个p标签定义的文字颜色是不同的，

    一个红色，一个绿色，一个蓝色。

    那么此时这三个选择器的属性样式又遇到冲突了—-这个p标签的文字到底是哪种颜色呢？

    此时，我们就要数一数这些CSS代码中id选择器、class选择器、标签选择器的个数，来判断这3个选择器的权重大小，最后以权重最大的选择器的样式为准。

    #box1 #box2 p这个选择器中，有2个id，0个class，1个标签，

    #box1 div.box2 #box3 p这个选择器中，有2个id，1个class，2个标签，

    .box1 .box2 .box3 p这个选择器中，有0个id，3个class，1个标签，

    那么根据id>class>标签的权重大小顺序，

    首先看选择器中id的数量，id数量最多的选择器，权重就最高，class和标签的数量就不用再比了。

    上面的三个选择器，第三个选择器有0个id，直接pass，哪怕第三个选择器中的class最多，标签最多，只要它的id最少，它的权重就最小。

    第一个和第二个选择器，id数量都是2，

    当id数量相同情况下，就要继续比较class的数量，

    第一个选择器有0个class，第二个选择器有1个class，

    此时，标签的第一个和第二个选择器的标签数量就没必要再比了。

    除非，class数量相同时，才需要继续比标签的数量。

    因此，在上面的代码案例中，可以得出结论，第二个选择器权重最高。

    !important提升权重

    ​

    如果我们需要把某个选择器的某条属性提升权重，那么在该属性后面写!important就可以实现。

    注意：!important写在分号前面。

    温馨提示：很多公司是不允许使用!important的，因为使用它会造成一些无法预知的样式冲突。所以一般不建议使用它。

    但是既然CSS中有这个知识，我们就了解一下。

    当CSS中有多个选择器选择同一个元素，并且这些选择器的"意见"都不相同，比如id选择器说颜色是红的，类名选择器说颜色是绿的，标签选择器说颜色是蓝的，那么它们就打架了，此时到底应该听谁的？这就是CSS层叠性冲突的本质。

    无论这些选择器在CSS中出现的顺序如何，都是根据CSS的权重规则来执行样式的。比如无论id选择器出现在类名选择器的前面还是后面，都是执行id选择器定义的样式。

    现在我在vscode和浏览器中演示一下，我创建了一个叫"层叠性和选择器权重计算.html"的文件，在里面写了一个p标签，给这个p标签id为para，class为spec，然后分别用标签选择器、id选择器、class选择器给这个标签添加样式，代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性和选择器权重计算</title>
    <style>
    p {
    color: red;
    }
    #para {
    font-style: italic;
    }
    .spec {
    text-decoration: underline;
    }
    </style>
    </head>
    <body>
    <p id="para" class="spec">正义的伸张，需要黑暗的力量</p>
    </body>
    </html>

    在浏览器中效果如下：

    我们看到文字既是红色，又是倾斜的，同时还有下划线，这就是CSS的层叠性。

    当你右键点击浏览器页面，会弹出下面的菜单：

    点击"检查"，就会打开调试窗口，然后再点击左边HTML中的p标签，右边就会显示出这个p标签身上所有的选择器，以及选择器定义的样式。

    同时会在CSS代码后面显示出选择器在文件中所在的行数：

    以上是前端代码调试窗口，我们先初步有个了解。

    关于CSS的选择器权重计算规则，我上面已经总结的比较详细了，在这里我只演示一个很简单的demo。

    我继续在"层叠性和选择器权重计算.html"这个文件中写代码，

    我新写了一个id为box的div，这个div里面有4个p标签，第二个和第三个p标签给它们的class名为spec1，HTML及CSS代码如下：

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性和选择器权重计算</title>
    <style>
    p {
    color: red;
    }
    #para {
    font-style: italic;
    }
    .spec {
    text-decoration: underline;
    }

    div#box p {
    color:orange;
    font-size: 20px;
    }
    div p.spec1 {
    color: red;
    }
    </style>
    </head>
    <body>
    <p id="para" class="spec">正义的伸张，需要黑暗的力量</p>
    <div id="box">
    <p>待到秋来九月八，我花开后百花杀。</p>
    <p class="spec1">嘘寒问暖，不如打笔巨款。</p>
    <p class="spec1">要治人渣，只能动用糟粕，甚至越糟粕越好。</p>
    <p>汪峰让我融不进城市，许巍让我回不了故乡。</p>
    </div>
    </body>
    </html>

    在浏览器中效果如下：

    看完代码和浏览器中的网页效果，有没有发现什么问题？

    我在CSS代码中，

    div#box p这个选择器，是用来选择div中所有的p标签，给它们的文字颜色设为橙色。

    div p.spec1这个选择器，是用来选择div中类名为spec1的两个p标签，给它们的颜色设为红色。

    按理来说，div中的第二个和第三个p标签的文字会变为红色，覆盖掉原来的橙色，但是在浏览器中，它们还是橙色，没有被红色覆盖。

    这是为什么呢？

    因为div p.spec1这个选择器的权重(0,1,2)，低于div#box p这个选择器的权重(1,0,2)。

    div#box p是选择div中所有的p标签，给文字设为它们橙色，

    div p.spec1是选择div中第二个和第三个p标签，给它们文字设为红色。

    这两个选择器写的都没有问题，但是因为div#box p的权重更高，

    所以CSS会执行div#box p定义的样式，不会执行div p.spec1定义的样式，所以没有起作用。

    那么要让div中第二个和第三个p标签的文字颜色变为红色，我们只需要对div p.spec1这个选择器做一点修改就行了。

    如何改呢？在div后面加上id选择器就行了：

    div#box p.spec

    div#box p.spec这个选择器的权重为(1,1,2)，

    高于div#box p的权重(1,0,2)

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层叠性和选择器权重计算</title>
    <style>
    p {
    color: red;
    }
    #para {
    font-style: italic;
    }
    .spec {
    text-decoration: underline;
    }
    ​
    div#box p {
    color:orange;
    font-size: 20px;
    }
    /* div后面加上id选择器#box，提高权重 */
    div#box p.spec1 {
    color: red;
    }
    </style>
    </head>
    <body>
    <p id="para" class="spec">正义的伸张，需要黑暗的力量</p>
    <div id="box">
    <p>待到秋来九月八，我花开后百花杀。</p>
    <p class="spec1">嘘寒问暖，不如打笔巨款。</p>
    <p class="spec1">要治人渣，只能动用糟粕，甚至越糟粕越好。</p>
    <p>汪峰让我融不进城市，许巍让我回不了故乡。</p>
    </div>
    </body>
    </html>

    此时，div中第二个和第三个p标签的文字就变为红色了。

    关于CSS的层叠性和选择器的权重计算（谁权重高，谁说了算），请自己再多动手写代码验证。

    感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！

    温馨提示：我在头条关于前端的图文，都是成体系的，如果是没接触过前端，对前端感兴趣、想要学习前端的小伙伴，要按顺序从第一节去看，更重要的是要动手实践。

    1.文章《『已知总数 如何求权重』求加权平均值》援引自互联网，为网友投稿收集整理，仅供学习和研究使用，内容仅代表作者本人观点，与本网站无关，侵删请点击页脚联系方式。

    2.文章《『已知总数 如何求权重』求加权平均值》仅供读者参考，本网站未对该内容进行证实，对其原创性、真实性、完整性、及时性不作任何保证。

    相关推荐

    ↑