计算权重的方法

最新推荐文章于 2023-04-26 14:39:44 发布

angying4104

最新推荐文章于 2023-04-26 14:39:44 发布

阅读量1k

点赞数

原文链接：http://www.cnblogs.com/lucky-lf/p/7076880.html

版权

三. 层叠和继承

继承

父元素拥有了某个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

angying4104

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
计算权重的方法

三. 层叠和继承继承父元素拥有了某个css属性，子元素不需要任何条件的情况下都会拥有父元素的属性。并不是所有的css属性都能继承，可以被继承的css属性有以下：color text- line- font- -->都是跟文字属性相关。 <!DOCTYPE html><html lang="en"><head> ...
复制链接

扫一扫