CSS三大特性(继承性，层叠性，优先级)
氿玥 2024-09-18 17:33:01 阅读 100
目录
在这篇文章中，我将通过详细的代码和最简便的语言来为大家介绍CSS的三大特性
一、继承性
1.1 代码示例
1.2 实现效果
二、层叠性
1.2 代码示例
2.2 实现效果
三、优先级
3.1代码示例
3.2实现效果
在这篇文章中，我将通过详细的代码和最简便的语言来为大家介绍CSS的三大特性
一、继承性
发生的前提是在嵌套关系下，为父级元素设置css样式时，会将一部分可继承的自动继承到子元素上，就相当于俗话说的子承父业
★ 文字颜色可以继承
★ 文字大小可以继承
★ 字体可以继承
★ 字体粗细可以继承
★ 文字风格可以继承
★ 行高可以继承
总结：文字的所有属性都可以继承，一下除外
标题标签（h1-h6）无法继承文字大小a标签无法继承文字颜色
（text-，font-，line-这些元素开头的可以继承，以及color属性）
1.1 代码示例
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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 代码示例
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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代码示例
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<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;">code>
我是一个div
</div>
</body>
</html>
3.2实现效果
通过结果我们可以看出，在写的代码中，有些标签在前面，按照层叠性的特点来说应该会被后面的覆盖掉，但是因为他的优先级高，所以会反而覆盖优先级低的选择器，但是作为低级的标签选择器，在其中加入了！important，继而成为了最高级，无法被任何选择器覆盖，这就是优先级的特点。
作者制作不易，如果对你有一点帮助请动动手点个赞，以后会更加积极和大家分享经验，或者有什么不懂的欢迎私信，我尽可能帮大家解答
上一篇： 前端H5实现视频上传，并截取第一帧作为封面。解决微信内ios系统无法上传视频的问题，解决ios截取视频作为封面的问题。
下一篇： webpack和vite的区别，为什么vite启动速度比webpack快？
本文标签
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。