css选择器权重计算

最新推荐文章于 2022-12-03 01:30:44 发布

为什么戴帽子？

最新推荐文章于 2022-12-03 01:30:44 发布

阅读量114

点赞数

分类专栏：学习记录文章标签： css html

本文链接：https://blog.csdn.net/weixin_42863585/article/details/114987342

版权

学习记录专栏收录该内容

5 篇文章 0 订阅

订阅专栏

权重计算

!important > 行间样式 > id>class\属性\伪类 >标签\伪元素> 通配符
css权重

!important	无穷大
行间样式	1000
id选择器	100
class/属性/伪类	10
标签/伪元素	1
通配符	0

注意：即使有11个class，也不会大于id。即同一元素有11个class，一个id，也是id优先。其他同理。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.p1{
			background-color: red;
		}

		p{
			background-color: yellow；
		}

		#p2{
			background-color: green;
		}

		*{
			font-size: 30px;
		}

		p{
			font-size: 10px;
		}

		.p3{
			color: red;
		}

		.p4{
			color: yellow;
		}

		.p5{
			background-color: gray;
		}

		.p5{
			background-color: gray !important;
		}
		/*加入！important，此时该样式优先级最高，优先级高于所有的样式显示，超过内联样式，但在开发中尽量避免使用style。*/
	</style>
</head>
<body>
	<!-- 当使用不同的选择器，选中同一个元素时并且设置相同类型的样式时 ，这时样式产生了冲突，
		 最终到底采用那个选择器定义的样式，由选择器的优先级（权重）决定。
		 优先级高的优先显示，
		 当选择器中包含多种选择器时，优先级需计算权重。但是注意选择器优先级计算不会超过他的最大数量级。
	-->
	<p class="p1" id="p2">我是一个段落</p>

	<p class="p1" id="p2" style="background-color: #f47;">我是一个段落</p>

	<p class="p1" id="p2">我是一个段落</p>

	<span>我是一个span</span>
	
	<span class="p3"  class="p4">当权重一样时，使用最后一个选择器里的内容</span>

	<!-- 并集选择器的优先级时单独计算
		 -->
		<span class="p5" style="background-color:red;">我是shabi</span>
		<span class="p6" style="background-color:red;">我是jjjj</span>
	<!-- 优先级（权重）的规则：
		内联样式  	优先级 1000
		id选择器  	优先级 100
		类和伪类 	优先级 10
		元素选择器	优先级 1
		通配符		优先级 0
		继承		没有优先级 -->

为什么戴帽子？

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css选择器权重计算

权重计算!important > 行间样式 > id>class\属性\伪类 >标签\伪元素> 通配符css权重!important无穷大行间样式1000id选择器100class/属性/伪类10标签/伪元素1通配符0注意：即使有11个class，也不会大于id。即同一元素有11个class，一个id，也是id优先。<!DOCTYPE html><html><head>
复制链接

扫一扫