关于CSS的优先级

最新推荐文章于 2022-12-12 15:42:15 发布

iceryan

最新推荐文章于 2022-12-12 15:42:15 发布

阅读量505

点赞数

分类专栏： css 文章标签： css优先级

本文链接：https://blog.csdn.net/iceryan/article/details/8182427

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

每CSS的选择器都有一个分数，可以根据这些分数这计算这些CSS的优先级

1. 拥有!important，最有最高的优先级

2. 标签。伪类或伪对象，优先级分数为1

3. 类、属性选择，优先级分数为10

4.id选择，优先级分数为100

5.style属性，优先级分数为1000

6.其他选择符，如统配符，优先级分数为0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<style type="text/css">
 		p{color:blue;}
		p.mycolor{color:black;}
		.mycolor{color:yellow}
		#mycolor{color:green}
		
    </style>

</head>
	
<body>
	<p>hello world 我是蓝色</p>
	<p class="mycolor">hello world 我是黑色</p>
        <p class="mycolor" id="mycolor">hello world 我是绿色</p>
   	<p style="color:red;" class"mycolor" id="mycolor" >hello world 我是红色</p>
</body>
</html>

根据上面的分数就很容易理解下面每个标签的颜色了，

p =1

p.mycolor = 11

.mycolor = 10

#mycolor = 100

style = 1000

如果是p{color:blue !important ;}那么所有的p标签的字体颜色都是蓝色的了

iceryan

关注

0
点赞
踩
0

收藏

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

每CSS的选择器都有一个分数，可以根据这些分数这计算这些CSS的优先级1. 拥有!important，最有最高的优先级2. 标签。伪类或伪对象，优先级分数为13. 类、属性选择，优先级分数为104.id选择，优先级分数为1005.style属性，优先级分数为10006.其他选择符，如统配符，优先级分数为0无标题文档 p{color:blue;}
复制链接

扫一扫