2020-09-21 CSS的三大特性

最新推荐文章于 2024-04-26 22:14:41 发布

WaKanDajava

最新推荐文章于 2024-04-26 22:14:41 发布

阅读量84

点赞数 1

分类专栏： CSS的三大特性文章标签： css

本文链接：https://blog.csdn.net/WaKanDajava/article/details/108717725

版权

CSS的三大特性专栏收录该内容

1 篇文章 0 订阅

订阅专栏

CSS的三大特性
层叠性、继承性、优先性

层叠性：
相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）另一个冲突的样式。
原则：

样式冲突，就近原则（哪个样式离结构近就执行哪个样式）
样式不冲突，不用层叠

继承性：
子标签继承父标签的某些样式（text-，font-，line-这些和文字有关的样式，以及color属性）
可以简化代码，降低CSS样式的复杂性

行高的继承

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>优先级</title>
    <style>
        .test {
            color: pink!important;
        }
        div {
            color: red;
        }
        #demo {
            color: green;
        }
    </style>
</head>
<body>
    <div class="test" id="demo" style="color:aqua">今天是学习的一天</div>
</body>
</html>

在这里插入图片描述
复合选择器会有权重叠加的问题
例：ul li { color } > li (color)

权重虽然会叠加，但不会进位

通过增加权重来优先使用想要的样式
例：.div -> .nav .div

WaKanDajava

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2020-09-21 CSS的三大特性

CSS的三大特性层叠性、继承性、优先性层叠性：相同选择器给设置相同的样式，此时一个样式就会**覆盖（层叠）**另一个冲突的样式。原则：样式冲突，就近原则（哪个样式离结构近就执行哪个样式）样式不冲突，不用层叠继承性：子标签继承父标签的某些样式（text-，font-，line-这些和文字有关的样式，以及color属性）可以简化代码，降低CSS样式的复杂性行高的继承优先性：当同一个元素指定多个选择器，就会有优先级的产生<!DOCTYPE html><html l
复制链接

扫一扫