06_CSS 特性

• 继承性
• 层叠性
• 优先级

继承性 inherited

（1）子元素有默认继承父元素样式的特点

可继承的常见属性（文字属性都可以继承）

color font-style font-weight font-size font-family text-align text-indent
line-height
 

通过调试工具判断样式是否可继承

（2）继承失效的特殊情况

如果元素有浏览器默认样式，就不继承父元素属性

• a 标签的 color 会继承时效
• h 系列标签的 font-size 会继承失效

示例 ：

<style>
    div {
        color: green;
        font-size: 16px;
    }
</style>

<div>
    <h1>将进酒</h1>
    <a href="#">李白 〔唐代〕</a>
    <p>君不见黄河之水天上来，奔流到海不复回。</p>
</div>

层叠性

同一个标签设置不同的样式

• 样式层叠叠加，共同作用在标签上

同一个标签设置相同的样式

• 样式会层叠覆盖，最终写在最后的样式生效

当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断结果

技巧: 编辑器多行输入

示例 ：

<style>
    .color--red {
        color: red;
    }

    /* 绿色的定义位置在红色之后 */
    .color--green {
        color: green;
    }

    .font-size--20 {
        font-size: 20px;
    }
</style>

<div class="color--green color--red font-size--20">
    君不见黄河之水天上来，奔流到海不复回。
</div>

君不见黄河之水天上来，奔流到海不复回。

优先级

不同选择器具有不同的优先级，

优先级高的选择器样式会覆盖优先级低的选择器

（1）优先级公式（由低到高）

• 继承
• 通配符选择器
• 标签选择器
• 类选择器
• id 选择器
• 行内样式
• !important（慎重使用）

总结：选择范围越小，优先级越高

（2）复合选择器权重叠加

计算公式，每级之间不进位

（0, 0, 0, 0）

(行内, ID, 类, 标签)

• 第一级 行内样式个数
• 第二级 id 选择器个数
• 第三级 类选择器个数
• 第四级 标签选择器个数

需要注意：

• !important 权重最高
• 继承权重最低

chrome 调试: 元素右键 -> 检查元素

工具：PxCook PxCook - 高效易用的自动标注工具,生成前端代码,设计研发协作利器

示例 1：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 2, 0, 0) */
    #father #son {
        color: blue;
    }

    /* (0, 1, 1, 1) */
    #father p.c2 {
        color: black;
    }

    /* (0, 0, 2, 2) */
    div.c1 p.c2 {
        color: red;
    }

    /* 继承 */
    #father {
        color: green !important;
    }

    /* 继承 */
    div#father.c1 {
        color: yellow;
    }
</style>

<div id="father"
     class="c1">
    <p id="son"
       class="c2">白日依山尽，黄河入海流。</p>
</div>

白日依山尽，黄河入海流。

示例 2：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 0, 0, 2) */
    div div {
        color: skyblue;
    }

    /* (0, 0, 0, 1) */
    div {
        color: red;
    }
</style>

<div>
    <div>
        <div>白日依山尽，黄河入海流。</div>
    </div>
</div>

白日依山尽，黄河入海流。

示例 3：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 0, 0, 7) */
    div div div div div div div {
        color: red;
    }

    /* (0, 0, 1, 0) */
    .one {
        color: green;
    }
</style>

<div>
    <div>
        <div>
            <div>
                <div>
                    <div>
                        <div class="one">白日依山尽，黄河入海流。</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

白日依山尽，黄河入海流。

示例 4：

<style>
    /* (行内，id, 类，标签) */
    /* (0, 0, 2, 1) */
    .c1 .c2 div {
        color: red;
    }

    /* (0, 1, 0, 1) */
    div #box3 {
        color: green;
    }

    /* (0, 1, 0, 1) */
    #box1 div {
        color: blue;
    }
</style>


<div id="box1"
     class="c1">
    <div id="box2"
         class="c2">
        <div id="box3"
             class="c3">白日依山尽，黄河入海流。</div>
    </div>
</div>

白日依山尽，黄河入海流。

示例 5：

<style>
    /* (行内，id, 类，标签) */
    /* 都是继承，最近的父级生效 */
    /* 继承 */
    div p {
        color: red;
    }


    /* 继承 */
    .father {
        color: green;
    }
</style>


<div class="father">
    <p class="son">
        <span>白日依山尽，黄河入海流。</span>
    </p>
</div>

白日依山尽，黄河入海流。