关于class和id的优先级

最新推荐文章于 2023-10-17 10:27:55 发布

原创最新推荐文章于 2023-10-17 10:27:55 发布 · 3.9k 阅读

2 ·

CC 4.0 BY-SA版权

本文通过一个具体的HTML示例展示了CSS样式的不同选择器及其优先级。解释了当多个样式规则应用于同一元素时，如何确定最终生效的样式。具体探讨了类选择器、ID选择器及元素选择器之间的优先级关系。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css样式的使用方式</title>
		<style>
			.v {background-color:red;}
			#v {background-color:yellow;}
			 h1{background-color:blue;}
			.v .p{background-color:green;} 
			#v .p {background-color:purple;}
		</style>
	</head>
	<body class="v" id="v">
		<h1 class="p">css样式的使用方式</h1>
	</body>
</html>

最后背景颜色为黄色，h1背景颜色为紫色。同级优先级id>class，对于二级内容，如果和上级属性有冲突的话，优先级id1 id2/class2/标签2> class1 id2/class2/标签2 >id2>class2>标签2>id1>class1>标签1