html5——css3(2)

最新推荐文章于 2023-04-06 14:35:13 发布

非常差12121

最新推荐文章于 2023-04-06 14:35:13 发布

阅读量336

点赞数

本文链接：https://blog.youkuaiyun.com/zgq12345zgq/article/details/108471331

版权

本文深入探讨了CSS层叠性和继承性的核心概念，解析了子容器如何继承父容器的样式，以及不同选择器优先级对样式应用的影响。通过实例说明了哪些样式可以继承，哪些不能，帮助读者理解复合选择器的权重叠加规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS层叠性和继承性:
层叠性:子容器的样式会继承父容器的样式。但并不是所有的样式都能继承。只有部分样式能继承，比如：文字相关字体大小、颜色、字体样式、行高、鼠标样式等。

例如：<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#two{color:red;
				font-size:30px;
				   width:200px;
				height:300px;
			}
			.one{
			color:blue;
				width:200px;
				height:300px;
			}
	
		</style>
	</head>
	<body>
		
		<p class="one" id="two">重要消息</p>
		
	</body>
</html>

在这里插入图片描述

因为对于相同方式的样式表，其选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器
并不是所有的CSS属性都可以继承，例如，下面的属性就不具有继承性：
在这里插入图片描述

继承性：所谓继承性是指书写CSS样式表时，子标记会继承父标记的某些样式，如文本颜色和字号。

例如：<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#two{
				font-size:300px;
				  color:blue;
			}
			.one{
				color：red;
			}
	
		</style>
	</head>
	<body>
		<p id="two">内容</p>
		<p class="one">123</p>
		
	</body>
</html>

定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
选择器排序的优先级为：ID选择器 > 类选择器 > 标签选择器**
ID选择器 :100;
类选择器 :10;
标签选择器:1;
对应的权重值：
p strong{ color:black} /权重为:1+1/
strong.blue{ color:green;} /权重为:1+10/
.father strong{ color:yellow} /权重为:10+1/
p.father strong{ color:orange;} /权重为:1+10+1/
p.father .blue{ color:gold;} /权重为:1+10+10/
#header strong{ color:pink;} /权重为:100+1/
#header strong.blue{ color:red;} /权重为:100+1+10/