元素的择偶权(权重)

前言

在上一期我们学习了选择器,学习完之后大家是否有这样一个疑问,如果两个选择器或者多个选择器同时对一个元素进行不同修饰,那元素应该选择谁呢?今天我们要学习的权重就能解决这个问题。

选择器的优先级(权重)

选择器名权重值
! important正无穷
行间样式1000
id选择器100
class选择器、属性选择器、伪类选择器10
标签选择器、伪元素选择器1
通配符选择器0

注:1、在计算机中,正无穷+1>正无穷。
2、如果权重值一样的话,会显示后面的,也就是先来后到,后面的会覆盖前面的选择器。
3、在权重中,是 256 进制,是从 0 到 255 后变成 1
所以这里的256进制的1000 不是10进制的1000,256进制的100 不是10进制的100,如果对进制不太明白的可以看一看这一篇文章进制
哪一个选择器的权重大,就选择哪一个选择器。

! important

其它选择器我就不演示怎么使用,可以看看这里选择器,我主要演示!important怎么使用。

<head>
	<style>
		div{
			width: 100px;
			height: 100px;
			background-color: black !important;
		}
		div{
			width: 100px;
			height: 100px;
			background-color: #f40;
		}
	</style>
</head>
<body>
	<div></div>
</body>

这里我们看到两个标签选择器,它们的权重是一样的,在上面我们说了如果权重一样,后面的会覆盖前面的,但是这里的第一个选择器中,第三行背景颜色后面跟着 !important 那么它的权重就是正无穷+1,而第二个选择器的权重为1,所以这里元素选择第一个选择器进行修饰。
运行结果:
在这里插入图片描述
好啦,本期文章就到此结束了,如果还有什么疑问,可以私信或评论区留言都是可以的。

  • 8
    点赞
  • 6
    收藏
  • 打赏
    打赏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论 4

打赏作者

是喜哈哈呀

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值