CSS技巧小记02：字体属性与继承规则(续篇)

最编程 2024-07-27 09:46:57

...

二、继承性

2.1、具有继承性的相关属性

继承性：文本相关的属性普遍具有继承性，只需要给祖先标签设置，即可在后代所有标签中生效。

具有继承性的有属性有：

color
font-xxx
list-xxx
text-xxx
line-xxx
使用场景：由于文字相关属性有继承性，通常会设置body标签的字号，颜色，行高等，这样就可以当做整个网页的默认样式了。
<style>
    body {
        font-size: 15px;
        line-height: 1.2;
        font-weight: bold;
        font-family: '微软雅黑';
        color: red;
    }
</style>
<body>
    <div class="div1">
        <div class="div2">
            长路&林儿；长路&林儿；长路&林儿；长路&林儿；长路&林儿；
        </div>
    </div>
</body>

效果：

2.2、继承性—就近原则

就近原则：在继承的情况下，选择器权重计算失效，而是根据"就近原则"。

情况一：继承性与对应标签直接设置属性，直接设置属性权重大。

<style>
    /* 通过继承性 */
    .class1 .class2 .class3 {
        color: red;
    }
    /* p标签直接设置属性：权重最大 */
    p {
        color: gold;
    }
</style>
<body>
    <div class="class1" id="id1">
        <div class="class2" id="id2">
            <div class="class3" id="id3">
                <p>我是长路</p>
            </div>
        </div>
    </div>
</body>

情况二：根据继承性比较哪个继承距离更近，更近的权重大。

<style>
    /* 继承性：距离p元素最近的是第二个div */
    #id1 .class2 {
        color: red;
    }
    /* 继承性：举例p元素最近的是滴三个div，所以该权重更大 */
    #id1 .class3 {
        color: gold;
    }
</style>
<body>
    <div class="class1" id="id1">
        <div class="class2" id="id2">
            <div class="class3" id="id3">
                <p>我是长路</p>
            </div>
        </div>
    </div>
</body>

情况三：若是都是继承性相关，距离都是相同的，根据权重来比较。

<style>
    /* 由于两个距离相同，都是最近的class3，所以要按照权重来进行比较 */
    /* 继承性：权重为(0,3,0) */
    .class1 .class2 .class3 {
        color: red;
    }
    /* 继承性：权重为(1,2,0),所以这里更大 */
    #id1 .class2 .class3 {
        color: gold;
    }
</style>
<body>
    <div class="class1" id="id1">
        <div class="class2" id="id2">
            <div class="class3" id="id3">
                <p>我是长路</p>
            </div>
        </div>
    </div>
</body>

上一篇： Java学习手记(9)：面向对象进阶——继承机制详解

下一篇：一文读懂继承性