前端学习：CSS三大特性

最新推荐文章于 2024-11-01 12:26:05 发布

real_laugh

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量361

点赞数

文章标签： css 前端学习

本文链接：https://blog.csdn.net/real_laugh/article/details/122986143

版权

本文详细介绍了CSS的三大特性：层叠性、继承性和优先级。通过实例展示了如何处理样式冲突，解释了样式层叠的就近原则，以及详细说明了继承性的应用，特别是在行高自动调整中的作用。此外，还阐述了优先级的计算规则，包括不同选择器的权重，并提供了权重比较和叠加的示例。理解这些特性对于优化网页样式和提高CSS代码效率至关重要。

摘要由CSDN通过智能技术生成

CSS有三个特性：层叠性、继承性、优先级。

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

<!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>层叠性</title>
    <style>
        div {
            color: red;
            font-size: 50px;
        }

        div {
            color: pink;
        }
    </style>
</head>

<body>
    <!-- 
        pink离文本比较近，因此是粉色。
        font-size属性没有冲突，因此不会层叠。
    -->
    <div>我到底是什么颜色。</div>
    <div>总结：长江后浪推前浪，前浪死在沙滩上</div>
</body>

</html>

继承性：子标签会继承父标签的与文本相关的样式，如text-、font-、line-这些开头的元素以及color属性。
特殊情况：行高的继承
如：父类中有font: 12px/1.5;
而子类中有font: 14px;
则子类中的文本行高应该为 14*1.5=21px
可以通过这个特性实现根据文字大小自动调整行高的功能。

<!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>继承性</title>
    <style>
        div {
            color: pink;
            font-size: 14px;
        }
    </style>
</head>

<body>
    <div>
        <p>龙生龙，凤生凤，老鼠生的孩子会打洞</p>
    </div>
</body>

</html>

优先级：当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同时，执行层叠性。
选择器不同时，根据选择器权重执行。
选择器权重：

选择器	权重
继承或 *	0，0，0，0
元素选择器	0，0，0，1
属性选择器类选择器，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式style=""	1，0，0，0
!important	无穷大

<!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>优先级</title>
    <style>
        div {
            color: pink;
            /* color: pink !important; */
        }

        .test {
            color: red;
        }
    </style>
</head>

<body>
    <!-- 
            .text的权重大于div的权重，因此字体为红色
            如果添加了!important，则权重最大，字体为粉色
         -->
    <div class="test">你笑起来真好看</div>
</body>

</html>

注：权重比较时，由左向右比较，较大者权重高，相同则继续比较下一位。
优先级不会有进位，即类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
权重可以叠加。

/* ul li 的权重为 0，0，0，1 + 0，0，0，1 = 0，0，0，2 */
ul li {
    color: green;
}

/* li 的权重为 0，0，0，1 */
li {
    color: red;
}

/* .nav li 的权重为 0，0，1，0 + 0，0，0，1 = 0，0，1，1 */
.nav li {
    color: pink;
}