H5零基础-CSS的三大特性

CSS有三个非常重要的特性：层叠性、继承性、优先级。

一、层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)到另一个冲突的样式。层叠性主要解决样式冲突的问题。

示例代码：

 <style>
        div {
            color: red;
            font-size: 12px;
        }

        div {
            color: pink;
        }
    </style>

<div>长江后浪推前浪，前浪死在沙滩上</div>

运行效果：

image.png

层叠性原则：

• 样式冲突，遵循的原则是就近原则；
• 样式不冲突，不会层叠(覆盖)；

二、继承性

CSS中的继承：子标签会继承父标签的某些样式，比如文本颜色和字号。简单的理解就是：子承父业。

<style>
    div {
            color: pink;
            font-size: 14px;
            line-height: 1.5;
        }
</style>

<div>
        <p>龙生龙，凤生凤，老鼠生来会打洞</p>
</div>

运行效果：

image.png

小结

• 恰当地使用继承可以简化代码，降低CSS样式的复杂性；
• 子元素可以继承父元素的样式，如：text、font-、line-、color这些元素开头的属性可以继承；

三、优先级

当同一个元素指定多个选择器，就会有优先级的产生。

<style>
       /* div {
            color: pink !important;
        } */

       div {
            color: pink;
        }

        .test {
            color: red;
        }
</style>

<div class="test">你笑起来真好看</div>

运行效果：

image.png

小结

• 选择器相同，则执行层叠性；
• 选择器不同，则根据选择器权重执行；

选择器权重表

选择器	选择器权重
继承 或者 *	0, 0, 0, 0
元素选择器	0, 0, 0, 1
类选择器，伪类选择器	0, 0, 1, 0
ID选择器	0, 1, 0, 0
行内样式 style=""	1, 0, 0, 0
!important 重要的	∞ 无穷大

小结
继承的权重是0，如果钙元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。

简单记忆法

• 通配符和继承权重为 0；
• 标签选择器为 1；
• 类(伪类)选择器为 10；
• id选择器为 100；
• 行内样式为 1000；
• !important 无穷大。

扩展
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。

示例代码：

    <style>
        /* ul + li 的权重是2 */
        ul li {
            color: green;
        }

        /* li的权重是1， */
        li {
            color: red;
        }
    </style>
    <ul>
        <li>久旱逢甘雨</li>
        <li>他乡遇故知</li>
        <li>洞房花烛夜</li>
        <li>金榜题名时</li>
     </ul>

运行效果：

image.png

END !