CSS选择器特殊性解析-优快云博客

本文链接：https://blog.youkuaiyun.com/FeatureVey/article/details/80033099

本文详细解释了CSS选择器的特殊性概念及其对样式优先级的影响。通过具体实例展示了不同选择器（如ID、类、伪类等）对样式的贡献度，并说明了即使多次使用同一类选择器也不会增加其特殊性的进位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器的特殊性: 特殊性表述为 4个值(0,0,0,0). 这四个值体现了css选择器对优先级的贡献度
内联: (1,0,0,0)
ID: (0,1,0,0)
类,伪类,属性选择: (0,0,1,0)
伪元素: (0,0,0,1)
通配"*": (0,0,0,0)
组合: 没有贡献
继承: 没有特殊性

*在一般情况下,这是个贡献是没有什么作用的
*但是一旦选择器对元素的选择出现了交集
*例如张三选了某个a标签,李四也选了a标签,设置了不同的字体大小的样式
*但是张三的选择器对优先级的贡献大,浏览器就听张三的,忽略李四的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 100px;
				height: 100px;
			}
			#box{
				background-color: red;
			}
			.test.test.test.test.test.test.test.test.test.test.test.test{
				background-color: yellow;
			}
		</style>
	</head>
	<body>
		<div id="box" class="test">
			
		</div>
	</body>
</html>

显示效果: