CSS三大特性(继续性，层叠性，优先级)

忿忿的泥巴坨 · 2024-9-27 02:03:20

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

目录
在这篇文章中，我将通过详细的代码和最轻便的语言来为大家介绍CSS的三大特性
一、继续性
1.1 代码示例
1.2 实现效果
二、层叠性
1.2 代码示例
2.2 实现效果
三、优先级
3.1代码示例
3.2实现效果

在这篇文章中，我将通过详细的代码和最轻便的语言来为大家介绍CSS的三大特性

一、继续性

        发生的前提是在嵌套关系下，为父级元素设置css样式时，会将一部分可继续的自动继续到子元素上，就相称于俗话说的子承父业
★ 笔墨颜色可以继续
        ★ 笔墨大小可以继续
        ★ 字体可以继续
        ★ 字体粗细可以继续
        ★ 笔墨风格可以继续
        ★ 行高可以继续
总结：笔墨的所有属性都可以继续，一下除外

标题标签（h1-h6）无法继续笔墨大小
a标签无法继续笔墨颜色

（text-，font-，line-这些元素开头的可以继续，以及color属性）
1.1 代码示例

<!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: red;
/*字体大小*/
font-size: 50px;
/*字体风格 italic倾斜*/
font-style: italic;
}
</style>
</head>
<body>
<div>
我是一个div
<ul>
我是一个ul
<li>我是一个li</li>
</ul>
</div>
</body>
</html>

复制代码

1.2 实现效果

二、层叠性

当多个样式作用于同一个（同一类）标签时，样式发生了冲突，总是执行后边的代码。和标签调用选择器的次序没有关系。
1.2 代码示例

<!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: red;
font-size: 50px;
font-style: italic;
text-align: center;
}
div{
color: blue;
}
</style>
</head>
<body>
<div>
我是一个div
</div>
</body>
</html>

复制代码

2.2 实现效果

        通过右下角的样式我们可以看出在先前被界说的红色字体已经被后来的蓝色字体覆盖了，其他没有被覆盖的还是正常表现出来

三、优先级

默认样式<标签选择器<类选择器<id选择器<行内样式<！important
权重 0 1 10 100 1000 无穷大
        优先级特点

继续的权重为0
权重能叠加

3.1代码示例

<!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>
#con{
color: blue;
}
.box{
color: blueviolet;
font-family: "楷体";
}
div{
color: skyblue !important;
font-size: 50px;
font-style: italic;
font-family: "宋体";
text-align: center;
}
</style>
</head>
<body>
<div class="box" id="con" style="font-size: 60px; color: yellow;">
我是一个div
</div>
</body>
</html>

复制代码

3.2实现效果

通过效果我们可以看出，在写的代码中，有些标签在前面，按照层叠性的特点来说应该会被后面的覆盖掉，但是由于他的优先级高，所以会反而覆盖优先级低的选择器，但是作为低级的标签选择器，在其中加入了！important，继而成为了最高级，无法被任何选择器覆盖，这就是优先级的特点。

作者制作不易，如果对你有一点帮助请动动手点个赞，以后会更加积极和大家分享经验，或者有什么不懂的欢迎私信，我尽大概帮大家解答

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

CSS三大特性(继续性，层叠性，优先级)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块