1. CSS的三大特性

news2024/10/6 5:55:06

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

1.1层叠性

相同选择器给设置相同的样式，此时一个样式就会覆盖(层叠)另一个冲突的样式。层叠性主要解决样式冲突
的问题
层叠性原则:
●样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式
●样式不冲突,不会层叠
如下图，上面一个color:red;会被覆盖，但font-size:18px;不会
在这里插入图片描述

1.2继承性

CSS中的继承：子标签会继承父标签的某些样式,如文本颜色和字号。
简单理解就是:子承父业
在这里插入图片描述
●恰当地使用继承可以简化代码,降低CSS样式的复杂性
●元素可以继承父元素的样式( text- , font- , line这些元素开头的可以继承,以及color属性)，
但高度和内外边距等不能继承

行高的继承性

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

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

1.3优先级

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

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 类选择器 */
        .test {
            color: red;
        }
        /* id选择器 */
        #exp {
            color: blueviolet;
        }
        /* 元素选择器 */
        div {
            /* !important 权重最高 */
            color: pink!important;
        }
    </style>
</head>
<body>
    <div class="test" id="exp" style="color: dodgerblue;">你笑起来真好看</div>
</body>
</html>

结果为粉色：
在这里插入图片描述

（2）优先级注意点:
1.权重由4组数字组成，但是不会有进位。
2.可以理解为类选择器永远大于元素选择器，id选择器永远大于类选择器,以此类推…
3.等级判断从左向右,如果某一位数值相同,则判断下一位数值。
4.简单记忆法：通配符和继承权重为0，标签选择器为1，类(伪类)选择器为10， id选择器100，行内样式表为1000，!important无穷大.
5.继承的权重是0 ,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
6.a链接浏览器默认定制了一个样式：蓝色有下划线
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 父亲的权重为 100 */
        #f {
            color: pink;
        }
        /* p继承的权重为 0 */
        /* 所有以后我们看标签到底执行哪个样式就看它有没有被直接选中 */
        p {
            color: blueviolet;
        }
        body {
            color: red;
        }
        /* a链接浏览器默认定制了一个样式：蓝色 有下划线 */
    </style>
</head>
<body>
    <div id="f">
        <p>你很好看</p>
    </div>
    <a href="#">我是单独的样式</a>
</body>
</html>

在这里插入图片描述

（3）权重叠加:
如果是复合选择器,则会有权重叠加,需要计算权重。
●div ul li ------ > 0,0,0,3
●.nav ul li------>0,0,1,2
●a:hover------ > 0,0,1,1
●.nav a------ > 0,0,1,1
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 复合选择器会有权重叠加的问题 */
        /* ul li 的权重是 0,0,0,1 + 0,0,0,1 =0,0,0,2    2 */
        ul li {
            color: green;
        }
        /* li 的权重是0,0,0,1     1*/
        li {
            color: red;
        }
        /* .na li 的权重是 0,0,1,0 + 0,0,0,1 =0,0,1,1    11*/
        .nav li {
            color: blueviolet;
        }
    </style>
</head>
<body>
    <ul class="nav">
        <li>西瓜</li>
        <li>菠萝</li>
        <li>草莓</li>
    </ul>
</body>
</html>