理解CSS三大特性，设置样式游刃有余

最新推荐文章于 2021-08-09 08:56:27 发布

_zlfan

最新推荐文章于 2021-08-09 08:56:27 发布

阅读量99

点赞数

分类专栏：前端之路文章标签： css css3 前端

本文链接：https://blog.csdn.net/void_fan/article/details/109840309

版权

前端之路专栏收录该内容

19 篇文章 0 订阅

订阅专栏

CSS三大特性

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

层叠性

相同选择器给标签设置相同的样式，此时一个样式会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。
观察下面html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: green;
            font-size: 18px;
        }
        div {
            color: blue;
        }
    </style>
</head>
<body>
    <div>这是填充内容</div>
</body>
</html>

此时，div会变成蓝色，遵循层叠性原则：

相同属性的样式冲突，遵循就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠，如上面的 font-size

继承性

子标签会继承父标签的某些样式，比如文本颜色和字号等。
观察下面html代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: green;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div><p>这是填充内容</p></div>
</body>
</html>

只给div标签设置样式，可以发现p标签把样式继承了下来

恰当使用继承可以简化代码，降低CSS样式代码的冗余
子元素继承父元素的样式，这些样式包括（text-，font-，line-这样属性开头的，以及color）

优先级

重点，当一个标签有多个选择器指定时，就会有优先级产生。比如下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: green;
        }
        .nav {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav">这是填充内容</div>
</body>
</html>

此时div会变成什么颜色呢，结果为

当优先级产生了的时候

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

选择器的权重如下表，用4个数字表示

选择器	权重
`继承`或者*	0,0,0,0
标签选择器	0,0,0,1
类选择器，伪类选择器	0,0,1,0
id选择器	0,1,0,0
行内样式style=""	1,0,0,0
!important	无穷大

权重比较规则：
可以把它们看着一个4位数的数字，比如标签选择器为0001，比类选择器为0010小。
所以上述代码中div标签就变为了蓝色。

可以发现有一个 !important，将上述代码修改为：

div {
	color: green!important;
}

若该标签上的选择器都为基础选择器，此时div就会变为绿色了。

特殊的，相同样式属性继承在优先级中使用，观察下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            color: green;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav"><p>这是填充内容</p></div>
</body>
</html>

我在上面特别标注了继承，注意，它的权重是 0,0,0,0 ，不管有没有设置!important，比p标签的 0,0,0,1 小，最终会显示蓝色。

再做修改，在 div 后面加了个 p选择器，观察下面代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p {
            color: green;
        }
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="nav"><p>这是填充内容</p></div>
</body>
</html>

此时，文字会变成什么颜色呢
如果是复合选择器，会有权重叠加产生，注意叠加不会按十进一，仅仅是用来比较

div p {} 权重为 0001 + 0001 = 0002
p {}     权重为 0001

所以文字最后会变成绿色，如果要变回显示蓝色，则可以通过增加权重来实现：

div p {} 	权重为 0001 + 0001 = 0002
.nav p {}   权重为 0010 + 0001 = 0011

这里并不是因为 11 > 2 就显示蓝色，而是因为它的第三位是 1，比 0 大。
不能按照数学的加法进位。

_zlfan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
理解CSS三大特性，设置样式游刃有余

CSS三大特性CSS有三个非常重要的特性：层叠性、继承性、优先级（权重）。层叠性相同选择器给标签设置相同的样式，此时一个样式会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。观察下面html代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width
复制链接

扫一扫