【CSS】CSS的三大特性

最新推荐文章于 2022-02-19 08:03:45 发布

不大好不大好

最新推荐文章于 2022-02-19 08:03:45 发布

阅读量102

点赞数

分类专栏： HTML与CSS 文章标签： css

本文链接：https://blog.csdn.net/weixin_44707049/article/details/111473406

版权

HTML与CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

CSS继承性参考文章：

https://www.cnblogs.com/guokaifeng/p/10999679.html

CSS优先级参考文章：

https://www.cnblogs.com/cnblogs-jcy/p/8574177.html

CSS的三大特性：

继承性
层叠性
优先级

1.继承性
官方解释就是，继承是一种规则，它允许样式不仅应用于特定的HTML标签元素，而且应用于其后代元素，就是父元素设置的一些样式属性，子元素/后代元素也可以使用。
实例代码：

	<head>
		<meta charset="UTF-8">
		<title>CSS继承性</title>
		<style>
			#Father{
				width: 1020px;
				height: 630px;
				background-color: yellow;
			}
			#Son{
				height: 50px;
			}
		</style>
	</head>
	<body>
		<div id="Father">
			<div id="Son">
				
			</div>
		</div>
	</body>

代码中可以看到，我们给Father的div设置了长宽，背景色，而Son的div只设置了高度，会有什么现象呢？
在这里插入图片描述
当我们用控制台去看的时候，会发现：

我们没给Son设置宽度和背景色，但是它却有，这里的宽度和背景色就是它从它的父元素Father那里继承过来的。这就是继承性。有哪些属性是可以继承哪些属性不可以继承，可以看看CSS继承性参考文章，里面写的很详细。

2.层叠性
层叠性是CSS处理冲突的能力，就是多种选择器选中了同一个元素，又对该元素的相同属性设置了不同的属性值，这个时候就会发生层叠性。
当发生层叠性的时候，CSS会根据权重来处理冲突：

权重相同，则根据CSS代码的顺序处理，后面的会把前面的覆盖掉
权重不同，权重大的覆盖权重小的

实例代码：

	<head>
		<meta charset="UTF-8">
		<title>CSS层叠性</title>
		<style>
			#Father{
				width: 1020px;
				height: 630px;
				background-color: yellow;
			}
			#Father>div{
				background-color: green;
			}
			#Son{
				height: 50px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="Father">
			<div id="Son" style="background-color: black;">
				
			</div>
		</div>
	</body>

上面代码可以看到，我们分别用来ID选择器还有行内样式来给Son设置背景色，那么Son的背景色会是绿色、红色、黄色还是黑色呢？
在这里插入图片描述
是黑色，这就是因为行内样式的权重远大于id选择器，所以当它们设置的样式冲突时，CSS就会采用行内样式设置的属性值。

3.优先级
优先级其实字面意思就能理解它的意思了。这里只需要记住下面的这个排序就差不多够用了。

!important(无穷大)>行内样式(1000)>id选择器(100)>类选择器(10)>标签选择器(1)>通配符、继承(0)

如果某元素没有被直接选中，而是通过继承得到的属性设置，那么不管它的父级权重多么高，它的权重都是0

权值的计算：
权值 =ID选择器的权重x个数+类选择器的权重x个数+标签选择器的权重x个数；
!important权重是正无穷，通配符和继承为0，所以都不纳入计算式子里面
实例：

		<style>
			/*只有一个ID选择器，权值=100*/
			#Father{
				width: 1020px;
				height: 630px;
				background-color: yellow;
			}
			/*一个ID选择器，一个通配符，一个标签选择器，权值=100+0+1=101*/
			#Father>div{
				background-color: green;
			}
			/*只有一个ID选择器，权值=100*/
			#Son{
				height: 50px;
				background-color: red;
			}
		</style>

关于CSS优先级这部分想了解更多可以看CSS优先级参考文章。

不大好不大好

关注

0
点赞
踩
0

收藏

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

CSS继承性参考文章：https://www.cnblogs.com/guokaifeng/p/10999679.htmlCSS优先级参考文章：https://www.cnblogs.com/cnblogs-jcy/p/8574177.htmlCSS的三大特性：继承性层叠性优先级1.继承性官方解释就是，继承是一种规则，它允许样式不仅应用于特定的HTML标签元素，而且应用于其后代元素，就是父元素设置的一些样式属性，子元素/后代元素也可以使用。实例代码： <head&g
复制链接

扫一扫

专栏目录