课时88.权重问题(掌握)

本文详细解析了CSS中选择器优先级的计算规则,包括ID、类名和标签名称的数量对比,以及当优先级相同时的处理原则,帮助读者理解并掌握样式应用的优先顺序。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.什么是优先级的权重?

作用:当多个选择器混合在以前使用时,我们可以通过计算权重来判断谁的优先级最高。

三个选择器都是直接选中p标签

2.权重问题的计算规则

2.1首先先计算选择器中有多少个id,id多的选择器优先级最高

2.2如果id的个数一样,那么再看类名的个数,类名个数多的优先级最高

.box1  .box2{

       color:blue;

}这个有两个类名

div .box2{

color:green;

}这里有一个类名

上面的优先级高,所以显示蓝色

2.3如果类名的个数一样,那么再看标签名称的个数,标签名称个数多的优先级最高。

#identity1 ul p{

         color:green;

}  这里有一个id,0个类,2个标签

#identity  ul  li p{

color:blue;

}一个id,0个类,3个标签

2.4如果id个数一样,类名个数也一样,标签名称个数也一样,那么就不会继续往下计算了,那么此时谁写再后面就听谁的,也就是说优先级如果一样,谁写再后面就听谁的。

#identity1  ul  .box2{

color:red;

}

.box   li     #identity2{

color:blue;

}

id个数一样,类的个数一样,标签个数一样,谁写再后面听谁的

注意点:

1.只有选择器是直接选中标签的才需要计算权重

为什么呢?来看下面的例子

.box2{

color:red;

}直接选中(一定会听直接的,所以一定是红色)

li{

color:blue;

}这个是继承来的。

 

转载于:https://www.cnblogs.com/luckyshuangshuang/p/9172666.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值