当前位置：首页 > news >正文

CSS三大特性——继承、优先级与层叠

news 来源：原创 2025/4/24 2:38:05

1. 层叠性

概念：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆

盖）。

什么是样式冲突？ ——— 元素的同一个样式名，被设置了不同的值，这就是冲突。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_三大特性-层叠</title>
    <style>
        /* 概念：如果发生了样式冲突，那就会根据一定的规则
        （选择器优先级），进行样式的层叠（覆盖）。 */

        #id {
            color: aqua;
            font: bold italic 20px "隶书"
        }
        p{
            color: red;
        }
    </style>
</head>

<body>

    <div>
        <p id="id">哈哈</p>
    </div>

</body>

</html>

2.继承性

概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。

规则：优先继承离得近的。

常见的可继承属性：text-?? ， font-?? ， line-?? 、 color ......

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS_三大特性-继承</title>
    <style>
        /* 体现了继承性 设置父代属性，其后代元素也会拥有
        概念：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
        规则：优先继承离得近的。
        */
        div {
            color: brown;
        }
        p{
            color: aqua;
        }
    </style>
</head>

<body>

    <div>
        <span>
            我是span里的
            <p>
                我是p里的
                <p>
                    <span>我是span里的</span>
                </p>
            </p>
        </span>
    </div>
</body>

</html>

3.优先级

简单聊： !important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样

式。

1.简单聊

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器优先级_简单聊</title>
</head>
<style>
    /* 行内 > ID选择器 > 类选择器 > 元素选择器 > 通配选择器 */
    *{
        color: red;
    }
    h2{
        color: blue;
    }
    .slogan{
        color: green;
    }
    #atguigu{
        color: aqua;
      
    }
</style>

<body>
    <h2 style="color: black;"  class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术</h2>


</body>

</html>

2.详细聊

需要计算权重。

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器优先级_详细聊 </title>
</head>
<style>
   
    /* 二个类选择器一个元素选择器 */
    .container span.slogan{
        font:bold italic 30px "华文琥珀";

        color: blue;

    }
    div>p>span:nth-child(1){
        color: red;
    }


</style>

<body>
    <div class="container">
        <p>
            <span class="slogan" id="atguigu" >尚硅谷，让天下没有难学的技术！</span>
            <hr>
            <span>欢迎同学们来学习！</span>
        </p>
    </div>


</body>

</html>