外联Css与内嵌样式style的效果覆盖问题

旭辉夜夜访

已于 2024-03-01 00:00:47 修改

阅读量372

点赞数 8

文章标签： css 前端

于 2024-02-29 23:52:56 首次发布

本文链接：https://blog.csdn.net/qq_62322297/article/details/136383728

版权

代码内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<style>
			/*@import url("../css/index.css");*/
			
			.td1{
				width: 200px;
				height: 200px;
				text-align: center;
				font-size: 2em;
				background: red;
				color: blue;
			}
			
			.td2
			{
				width: 200px;
				height: 200px;
				text-align: center;
				font-size: 2em;
				background: greenyellow;
				color: yellow;
			}
			/*@import url("../css/index.css");*/
		</style>
		<!--<link rel="stylesheet" type="text/css" href="../css/index.css"/>-->
	</head>
	<body>
		<table>
			<td class="td1">测试1</td>
			<td class="td2">测试2</td>
		</table>
	</body>
</html>

我这里使用表格进行测试，HTML文件如上，Css文件内容如下。

.td1{
	width: 200px;
	height: 200px;
	text-align: center;
	font-size: 2em;
	background: greenyellow;
	color: yellow;
}

.td2{
	width: 200px;
	height: 200px;
	text-align: center;
	font-size: 2em;
	background: red;
	color: blue;
}

首先对于代码来说，代码从上而下运行，样式渲染也有先来后到，权重相等时，后渲染的效果将会覆盖前一个效果。

运行展示

外联Css在前，内嵌样式在后

出现的效果是内嵌样式设置效果。

内嵌样式在前，外联Css在后

效果呈现为外联Css设置的效果，这便是权重相等的情况下，呈现后渲染的效果。

内嵌样式在前（提高权重），外联Css在后

在内嵌样式style中，我对选择器td1的背景颜色提升了优先权

.td1{
        width: 200px;
        height: 200px; 
		text-align: center;
        font-size: 2em;
        background: red !important;
		color: blue;
}

此时运行结果如下

总结

权重（优先权）相等的情况，对于同一个标签的多个渲染效果，呈现最后渲染的那一个效果

注：

代码中的另外一种导入Css的方式@import，在内嵌样式中style中的.td1和.td2优先级高于外联的Css文件。

以上为Css的层叠顺序，即如下内容，优先级从高到低排列

重要性（Importance）：使用 !important 修饰符的规则具有最高的优先级，将覆盖任何其他规则。
特殊性（Specificity）：特殊性是通过选择器的组合来确定的。选择器越具体，优先级越高。例如，ID 选择器比类选择器具有更高的特殊性，而内联样式具有最高的特殊性。
来源（Origin）：样式表可以来自多个来源，包括用户代理（浏览器默认样式）、用户样式表（用户自定义的样式表）、作者样式表（网页作者提供的样式表）以及浏览器默认样式表。来自不同来源的样式表具有不同的优先级，通常来自作者样式表的规则比来自用户代理的规则优先级更高，而来自用户样式表的规则比来自作者样式表的规则优先级更高。
顺序（Order）：当具有相同优先级和特殊性的规则发生冲突时，最后定义的规则将覆盖之前定义的规则。因此，后面的规则具有更高的优先级。