CSS三大特性(层叠性、继承性、优先级)

川长思鸟来 2022-11-17 15:58 192阅读 0赞

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

# 1 层叠性 #

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

层叠性原则: .

*  样式冲突，遵循的原则是就近原则，哪个样式高结构近，就执行哪个样式
 *  样式不冲突，不会层叠

# 2 继承性 #

现实中的继承：我们继承了父亲的姓

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

*  恰当地使用继承可以简化代码。降低CSS样式的复杂性
 *  子元素可以继承父元素的样式 ( text- , font- , line- 这些元素开头的可以继承，以及color属性)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                color: pink;
                line-height: 24px/1.5;
            }
            
            div {
                /* 子元素继承了父元素body的行高1.5 */
                /* 这个1.5就是当前元素文字大小font-size的1.5倍 */
                font-size: 14px;
            }
        </style>
    </head>
    <body>
        <div>龙生龙和Dhabi觉得海拔九百嗲的话课程表</div>
        <p>龙生龙和Dhabi觉得海拔九百嗲的话课程表</p>
    </body>
    </html>

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

# 3 优先级 #

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

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

选择器权重如下所示

![image-20210409163714169][]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            .test {
                color: red;
            }
    
            div {
                color: pink!important;
            }
    
            #demo {
                color: green;
            }
        </style>
    </head>
    <body>
        <div class="test" id="demo" style="color: purple;">你笑傲起来真好卡</div>
    </body>
    </html>

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            /* 复合选择器会有权重叠加问题 不会进位噢 */
            ul li {
                color: green;
            }
    
            li {
                color: greenyellow;
            }
        </style>
    </head>
    
    <body>
        <ul>
            <li>haksna</li>
            <li>haksna</li>
            <li>haksna</li>
        </ul>
    </body>
    
    </html>

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

● 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

[image-20210409163714169]: /images/20221022/189a710e735b4638b4f29cb937bdb12f.png