CSS选择器权重

最新推荐文章于 2023-10-07 13:03:51 发布

二木成林

最新推荐文章于 2023-10-07 13:03:51 发布

阅读量455

点赞数

分类专栏： # CSS 文章标签： CSS

本文链接：https://blog.csdn.net/cnds123321/article/details/104202399

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS选择器

CSS选择器	表示
ID选择器	#id
class选择器	.class
标签选择器	p、a等
通配符选择器	*（表示选择所有的标签元素）
属性选择器	[type='text']
伪类选择器	:hover
伪元素选择器	::first-line
其他选择器	子选择器、相邻选择器

CSS选择器权重

类型	权重
! important	无穷
内联样式（如style="color:red"）	1000
ID选择器	100
class/属性/伪类选择器	10
标签/伪元素选择器	1
通配符	0

每个元素都有权重值，那么先应用哪个样式，就是哪个元素的权重大应用哪个元素的样式。

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>CSS选择器权重</title>
		<style type="text/css">
			/* 会发现显示的是后面的blue的背景颜色，而不是red颜色，它们的权重都是10 */
			/* 交换.a1和[href]的位置就会显示红色了 */
			/* 那么要显示红色怎么办呢？提高权重即可，把“[href]”修改为“a[href]”权重此时为11，所以显示红色 */
			/* 把“[href]”修改为“#d1 [href]”权重此时为110，所以也显示红色 */
			[href] {
				background: red;
				font-size: 30px;
			}

			/* a[href] {
				background: red;
				font-size: 30px;
			} */

			/* #d1 [href] {
				background: red;
				font-size: 30px;
			} */

			.a1 {
				background: blue;
				font-size: 30px;
			}
		</style>
	</head>
	<body>
		<div id="d1">
			<a href="#" class="a1">超链接</a>
		</div>
	</body>
</html>

浏览器显示如下：