CSS样式控制：层叠性、继承性和优先级解析-优快云博客

1. CSS的三大特性

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

1.1层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层曼性主要解决样式冲突的问题
层叠性原则:
● 样式冲突 ,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
● 样式不冲突,不会层叠

1.2继承性

现实中的继承:我们继承了父亲的姓
CSS中的继承：子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是:子承父业。
●恰当地使用继承可以简化代码，降低CSS样式的复杂性。
●子元素可以继承父元素的样式( text- , font- , line-这些元索开头的可以继承,以及color属性)。
●继承性口诀: 龙生龙,凤生凤，老鼠生的孩子会打洞。

行高的继承性

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

●行高可以跟单位也可以不跟单位
●如果子元素没有设置行高,则会继承父元素的行高为1.5
●此时子元素的行高是 :当前子元素的文字大小* 1.5
●body行高1.5这样写法最大的优势就是里面子元素可以根据自己文字大小自动调整行高

1.3优先级

当同一个元素指定多个选择器,就会有优先级的产生。
●选择器相同 ,则执行层叠性
●选择器不同,则根据选择器权重执行
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        div {
            color: pink!important;
        }
        .test {
            color: red;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo">你笑起来真好看</div>
</body>
</html>

在这里插入图片描述

优先级注意点:

权重是有4组数字组成但是不会有进位。
可以理解为类选择器永远大于元素选择器id选择器永远大于类选择器，以此类推…
等级判断从左向右，如果某一位数值相同 ,则判断下一位数值。
可以简单记忆法: 通配符和继承权重为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>CSS权重注意点</title>
    <style>
        #father {
            color: red;
        }
        p {
            color: pink;
        }
        body {
            color:red;
        }
        /* a链接浏览器默认制定了一个样式，蓝色的有下划线 a{color：blue；} */
        a {
            color: green;
        }
    </style>
</head>
<body>
    <div class="father">
        <p>你还是很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>
</html>