css选择器优先级及权重

最新推荐文章于 2024-04-27 19:27:33 发布

一枚小棋子

最新推荐文章于 2024-04-27 19:27:33 发布

阅读量879

点赞数

分类专栏： CSS 文章标签： css html5

本文链接：https://blog.csdn.net/isfor_you/article/details/108757364

版权

CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

一、CSS优先级
二、选择器权重

一、CSS优先级

1.行内样式（style="…"）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})
2.对应权重值：
行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）
3.利用权重值比较优先级
eg：
#box p .tt =100+1+10
#box .tt =100+10
权重值越大，优先级越高
选择器选择的范围越小越精确，优先级越高

二、选择器权重

1.代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{color:yellow;} /* 1 */
			div a{color:green;} /* 1+1 */
			.demo a{color:black;} /* 10+1 */
			#demo a{color:orange;} /* 100+1 */
			div#demo a{color:red;} /* 1+100+1 */
		</style>
	</head>
	<body>
		<a href="">应该是黄色</a>
		<div class="demo">
			<a href="">应该是黑色</a>
		</div>
		<div id="demo">
			<a href="">应该是红色</a>
		</div>
	</body>
</html>

2.结果显示

在这里插入图片描述

3.说明

第二个超链接对应的选择器有三个，比较权重值最大的等于11，则字体为黑色
同理，第三个超链接对应的选择器有四个，比较权重值最高的为102，则字体颜色为红色

一枚小棋子

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
css选择器优先级及权重

文章目录一、CSS优先级二、选择器权重1.代码演示2.结果显示3.说明一、CSS优先级1.行内样式（style="…"）>ID 选择器(#box{…})>类选择器(.con{…})>标签选择器(dic{…})>通用选择器(*{…})2.对应权重值：行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）3.利用权重值比较优先级eg：#box p .tt =100+1+10#box .tt =100+1
复制链接

扫一扫