CSS的三大特性

最新推荐文章于 2022-10-06 14:33:40 发布

星汐飞花

最新推荐文章于 2022-10-06 14:33:40 发布

阅读量89

点赞数

分类专栏：笔记文章标签： css

本文链接：https://blog.csdn.net/weixin_46426843/article/details/104897340

版权

16 篇文章 0 订阅

订阅专栏

在为HTML文件编写CSS样式时，我们可能会对同一个标签重复编写样式，如：

</head>
	<style>
		p{
			color: red;
		}
		p{
			color: pink;
		}
	</style>
<body>
	<p>这是一个段落</p>
</body>

在上面这段代码中，为编写了两个同样的样式，在真正执行时是执行下面的粉色的，当出现了同样式的编写，就会产生覆盖，后来者居上，后写的会把原来的覆盖掉。这就是CSS的覆盖性。

在CSS中子类可以继承父类的样式，但并不是所有样式都可继承。只有以text- fort- line-开头和color样式才可被子类继承。

</head>
	<style>
		.one{
			color: red;
		}
	</style>
<body>
	<div class="one">
		<p>这是一个段落</p>
	</div>
</body>

如以上，虽然我们没给P标签写样式，但是P可以通过继承他的父类来获得color:red;的样式。

在上面的覆盖性中我们说到，当出现同意样式的编写时会产生覆盖，这只是针对于使用同样的选择器。而是否产生方法的覆盖，还需要考虑到优先级的问题。以下列表是所有选择器的优先级数据。

当为一个样式编写了多个重复的样式后，系统会选择优先级最高的那一个。当我们使用复合选择器时，优先级还会出现叠加。

但是无论如何叠加，优先级是没有进位的，如10个标签选择器叠加，优先级为0，0，0，10 。而一个类选择器优先级为0，0，1，0 。优先级依旧是类选择器更高。

需要特别注意的是，继承而来的样式优先级为0，无论父类的优先级有多高，子类继承过来优先级都为0.当两个选择器优先级相同时，则出现覆盖，离结构最近的样式会被选中。

所以在我们去考量优先级时，第一先看标签是否被选中，当有多个都选中了在按公式去计算优先级。

关注