HTML+CSS 轻松入门之层叠

如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。

层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>层叠</title>
	<style type="text/css">
		h1{
			color:green;
		}
		h1{
			color:red;
		}
	</style>
</head>
<body>
	<h1>php 中文网</h1>
</body>
</html>

最后 h1 中的文本会设置为 red，这个层叠很好理解，理解为后面的样式会覆盖前面的样式

所以前面的css样式优先级就不难理解了：

内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。

新建文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>层叠</title>
	<style type="text/css">
		h1{
			color:green;
		}
		h1{
			color:red;
		}
	</style>
</head>
<body>
	<h1>php 中文网</h1>
</body>
</html>

提交重置代码

自动运行

全屏