CSS 之三大特性

最新推荐文章于 2024-05-14 10:21:36 发布

__Wwinky

最新推荐文章于 2024-05-14 10:21:36 发布

阅读量102

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Wwinky/article/details/118863069

版权

CSS 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的三大特性：层叠性、继承性和优先级。层叠性解决了样式冲突，遵循就近原则；继承性使得子元素可以继承父元素的某些样式，简化代码；优先级则涉及不同选择器的权重，行内样式权重最高，!important具有最大优先级。通过理解这些特性，可以更好地控制和组织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>Document</title>
    <style>
        div {
            color: white;
            background: rgba(0,0,0);
        }

        div {
            color: red;
            background: rgba(0, 0, 0, 0.5)
        }
    </style>
</head>
<body>
    <div>设置黑色背景</div>
</body>
</html>

具体效果如下：
在这里插入图片描述

继承性

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>Document</title>
    <style>
        body {
            background-color: pink;
        }
    </style>
</head>
<body>
    我是父类颜色
    <div>我是子类</div>
</body>
</html>

在这里插入图片描述
恰当地使用继承可以简化代码，降低CSS样式的复杂性

优先性

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

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

在考虑权重时，需要注意一些特殊的情况，具体如下：

继承样式的权重为0。
即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。
应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
权重相同时，CSS遵循就近原则。
也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

在这里插入图片描述

__Wwinky

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 之三大特性

文章目录层叠性继承性优先性CSS具有三大特性：层叠性继承性优先性层叠性层叠性主要是解决样式冲突的问题 – 相同选择器给设置相同的样式，此时一个样式会覆盖掉另一个样式。层叠性原则：样式冲突，遵循的是就近原则，哪个离样式近，就执行哪个样式样式不冲突，不会层叠<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equ
复制链接

扫一扫