CSS特性之层叠性-CSDN博客

本文链接：https://blog.csdn.net/qq_41803637/article/details/80023752

CSS的层叠性

1、层叠性的条件

（1）元素相同

（2）属性相同

（3）优先级相同

2、层叠性的样式冲突

（1）引用方式冲突

CSS的引用方式包括内联样式、内嵌样式、导入样式、链接样式，四个的优先级内联样式>内嵌样式>导入样式>链接样式；

CSS的部分

body{
	background: #000000;
}

HTML的部分

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<link href="Untitled-1.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body{
			background: #0005FF;
		}
	</style>
</head>

<body>
	<p style="background: #FD0206">优先级</p>
</body>
</html>

（2）继承方式冲突

这个可以这样比喻，比如我当前的对象为儿子，那么和儿子最近是父亲，再近一点的是爷爷，，所以显示的是他父亲。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		body{
			color: #0005FF;
		}
		#father{
			color: #FBFA2E;
		}
		#grandfather{
			color: #FD0206;
		}
	</style>
</head>

<body>
	<div id="grandfather">
		<div id="father">
			<div>
				<p>继承冲突</p>
			</div>
		</div>
	</div>
</body>
</html>

有一些人，会进一些死胡同里，比如我，当时不知道怎么想的，当把文本放置在“父亲”上时，而父亲本身没有带CSS样式，那么显示的是“爷爷”，还是“儿子”，这个可以比喻为当前的对象为刚出生，那么“父亲”刚出生，怎么可能有“儿子”，所以显示的是“爷爷”，其实质是因为“儿子”的范围不包括父亲。

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		body{
			color: #0005FF;
		}
		#son{
			color: #26F644;
		}
		#grandfather{
			color: #FD0206;
		}
	</style>
</head>

<body>
	<div id="grandfather">
		<div>
			<p>继承冲突</p>
			<div id="son">
			</div>
		</div>
	</div>
</body>
</html>

（3）指定样式冲突

当指定的样式发生冲突时，根据权重，进行比值；注意只有权重相同时，才会根据“后来居上”原则

选择器权重

选择器	权重
通配符	0
伪元素	1
元素选择器	1
class选择器	10
伪类	10
属性选择器	10
id选择器	100
行内选择器	1000

常见的伪元素有“：before”“：after”“：first-letter”“first-line”

常见的伪类：“hover”“first-child”

<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<!--link href="Untitled-1.css" rel="stylesheet" type="text/css"-->
	<style type="text/css">
		body{
			color:black;
		}
		.father{
			color:yellow;
		}
		#son{
			color:green;
		}
	</style>
</head>

<body>
	<div id="son" class="father">
		<p>继承冲突</p>
	</div>
</body>
</html>

id的权重最大，所以显示green。

（4）继承样式与指定样式冲突

当两者冲突时，以指定样式优先

（5）！important

！important可以改变优先级，如果使用它，则该样式可以覆盖在其他任何样式上面

<style>
.test {
	color: #f00 !important;
	color: #000;
}
.test2 {
	color: #f00 !important;
}
.test2 {
	color: #000;
}
</style>