搜 索

5. 继承性

  • 519阅读
  • 2020年10月23日
  • 0评论
首页 / CSS / 正文

CSS继承:子标签会继承父标签的某些样式,如文本颜色、字号。

子元素可以继承父元素的样式(text- , font- , line- , lise-这些元素开头的可以继承,以及color属性)

注意:继承的标签不如选中的标签权重大,例如:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .div1 .div2 .div3{
        color: red;
    }

    /* 结果为绿色 */
    p{
        color: green;
    }
</style>

<body>
    <div class="div1">
        <div class="div2">
            <div class="div3">
                <p>梦想家阳阳</p>
            </div>
        </div>
    </div>
</body>

</html>

结果为绿色
由此可以得知:p是直接选中了指定的标签,不管继承权重多大都没有直接选中大

就近原则

在继承情况下,选择器权重计算失效。而是以就近原则

例如:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 权重:1,1,0 */
    #div1 .div2{
        color: red;
    }

    /* 权重:0,2,0 */
    .div2 .div3{
        color: blue;
    }
</style>

<body>
    <div id="div1" class="div1">
        <div class="div2">
            <div class="div3">
                <p>梦想家阳阳</p>
            </div>
        </div>
    </div>
</body>

</html>

颜色为红色的权重比蓝色的要高,如果你认为结果是红色,那么你就错了。
继承是以就近原则,#div1 .div1 .div2虽然权重大,但是不起作用。因为.div2 .div3距离文本元素最近,所以才会被选中。

也不是说在继承情况下,选择器权重不起作用,而是在选择器跟元素距离一样时候才会进行权重计算,谁的权重大就选择谁的样式,例如:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    /* 权重:110 */
    #div1 .div2{
        color: red;
    }

    /* 权重:0,2,0 */
    .div1 .div2{
        color: blue;
    }
</style>

<body>
    <div id="div1" class="div1">
        <div class="div2">
            <div class="div3">
                <p>梦想家阳阳</p>
            </div>
        </div>
    </div>
</body>

</html>

显然 #div1 .div2 比 .div1 .div2 权重要大,所以结果是红色
他们都是同样的距离,相差一个.div3。所以会进行权重计算。

换句话说:只要你描述的足够近,那么你描述远的人选择器权重永远不如近的大。直接选中的最大

无标签
评论区
暂无评论
avatar