八、CSS 特性

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 权重最高
• 继承权重最低

ex：

<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>