计算权重的方法

作者：知新_RL | 2024-06-09 19:28:30

踩

计算行的权重

三. 层叠和继承

继承

父元素拥有了某个css属性，子元素不需要任何条件的情况下都会拥有父元素的属性。

并不是所有的css属性都能继承，可以被继承的css属性有以下：

color  text-  line-  font-   -->都是跟文字属性相关。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .d1 {
            color: red;
        }
        .d1 span {
            font-size: 100px;
        }
    </style>
</head>
<body>
    
    <div class="d1">
        <!-- span继承了div.d1的color属性 -->
        <span>Hello,span</span>
    </div>
</body>
</html>

其它的关于盒子、定位、布局的属性不能被继承。

层叠

是css处理冲突的一种解决方案。需要通过计算权重来解决层叠的问题。

计算权重的第一步


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    /*计算权重第一步比较id class html 选择器的数量*/
        #d1 .d2 p {
            color: red;
        }
        /*1 1 1*/
        div div #d3 p {
            color: green;
        }
        /*1 0 3*/
        div.d1 div.d2 div.d3 p {
            color: blue;
        }
        /*0 */
    </style>
</head>
<body>
    <div class="d1" id="d1">
        <div class="d2" id="d2">
            <div class="d3" id="d3">
                <p>div-div-div-p</p>
            </div>
        </div>
    </div>
</body>
</html>

结果：

计算权重1

计算权重的第二步


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*计算权重第二步，如果权重一样，那么后出现的会覆盖掉先出现的*/
        #d1 #d2 p {
            color: red;
        }
        #d2 #d3 p {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="d1" id="d1">
        <div class="d2" id="d2">
            <div class="d3" id="d3">
                <p>div-div-div-p</p>
            </div>
        </div>
    </div>
</body>
</html>

结果：

计算权重2

计算权重第三步


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*比较权重第三步：看选择器是否直接选中目标元素，如果没有选中目标元素，那么他们的权重为0*/
        #d1 #d2 #d3 {
            color: red;
        }
        div.d1 div.d2 div.d3 {
            color: blue;
        }
        p {
            color: green;
        }
    </style>
</head>
<body>
    <div class="d1" id="d1">
        <div class="d2" id="d2">
            <div class="d3" id="d3">
                <p>div-div-div-p</p>
            </div>
        </div>
    </div>
</body>
</html>

结果：

计算权重3

计算权重第四步


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*计算权重第四步：如果都没有选中，那么谁离目标元素近就听谁的*/
        #d2 #d3 {
            color: red;
        }
        #d1 #d2 {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="d1" id="d1">
        <div class="d2" id="d2">
            <div class="d3" id="d3">
                <p>div-div-div-p</p>
            </div>
        </div>
    </div>
</body>
</html>

结果：

计算权重4

总结

先看有没有选中目标元素，如果选中，比较权重，谁的权重大听谁的。如果权重一样，谁写在后面听谁的。
如果没有选中目标元素，那么权重为0，如果所有的权重都为0，就近原则，谁离目标元素近听谁的。

权重总结

转载于:https://www.cnblogs.com/lucky-lf/p/7076880.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/知新_RL/article/detail/695490