10.css三大特性-CSDN博客

本文链接：https://blog.csdn.net/2201_75320952/article/details/148772211

10.css三大特性

css有三大特性：层叠性，继承性，优先级

1.层叠性

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

层叠性原则：

样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式

样式不冲突，不会层叠

2.继承性

css中的继承，子标签会继承父标签的某些样式，如文本颜色和字号

行高的继承性

body{
    font:12px/1.5 Microsoft YaHei;
}

行高可以跟单位也可以不跟单位

如果子元素没有设置行高，则会继承父元素行高为1.5

此时子元素的行高是：当前子元素的文字大小*1.5

3.优先级

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

选择器相同，则执行层叠样式

选择器不同，则根据选择器权重执行

在这里插入图片描述

注：

权重是有四组数字组成，但是不会有进位
简单记忆法：通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器为100，行内样式表为1000，！important无穷大
继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0

复合选择器权重叠加

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>复合选择器权重叠加</title>
    <style>
        /* 复合选择器权重叠加问题 */
        /* li的权重是0，0，0，1 */
        li {
            color: blue;
        }

        /* ul li 权重 0，0，0，1 +0，0，0，1 =0，0，0，2 */
        ul li {
            color: #9d0b0b;
        }
        /* .nav li 权重 0，0，1，0 +0，0，0，1 =0，0，1，1 */
        .nav li {
            color: aquamarine;
        }
    </style>
</head>

<body>
    <ui class="nav">
        <li>无序列表1</li>
        <li>无序列表2</li>
        <li>无序列表3</li>
    </ui>
</body>

</html>

    <li>无序列表2</li>
    <li>无序列表3</li>
</ui>

```