CSS声明的优先级

最新推荐文章于 2022-05-31 16:14:13 发布

FeatureVey

最新推荐文章于 2022-05-31 16:14:13 发布

阅读量157

点赞数

分类专栏： CSS 文章标签： CSS选择器

本文链接：https://blog.csdn.net/FeatureVey/article/details/80033099

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

选择器的特殊性: 特殊性表述为 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>

显示效果:

*一个id选择器的贡献是(1,0,0,0),两个则是(2,0,0,0),100个就是(100,0,0,0) 不会进位

   * 所以 (1,0,0,0) 总是大于 (0,100,0,0)的
   * 所以在这个例子中,按照一般理解为十进制,我用了12个.test,但是最终显示的仍然是红色
   * 所以这12个.test并没有起作用

FeatureVey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS声明的优先级

选择器的特殊性: 特殊性表述为 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) 组合: 没有贡献继承: 没有特殊性 *在一般情况下,这是个...
复制链接

扫一扫

专栏目录