选择器的优先级

最新推荐文章于 2025-03-22 10:24:03 发布

原创最新推荐文章于 2025-03-22 10:24:03 发布 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#css

日常问题专栏收录该内容

25 篇文章

订阅专栏

本文通过一个HTML实例详细解析了CSS中不同选择器的优先级顺序：内联样式>ID选择器>类选择器>标签选择器>通配符选择器。并展示了当一个元素同时应用多种选择器时，最终样式如何确定。

1、如果一个元素使用了多个选择器,则会按照选择器的优先级来给定样式。

2、选择器的优先级依次是: 内联样式 > id选择器 > 类选择器 > 标签选择器 > 通配符选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box{
				color:red;
			}
			.dv{
				color:blue;
			}
			div{
				color:black;
			}
			*{
				color:green;
			}
		</style>
	</head>
	<body>
		<div id="box" class="dv" style="color:orange;">我是一个div</div>
	</body>
</html>