资讯专栏INFORMATION COLUMN

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

cucumber / 1118人阅读

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

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.ucloud.cn/yun/2105.html

相关文章

  • 我是如何学习游戏引擎的?

    摘要:下面列举了游戏开发中常见的岗位以及两条常见的协作开发的流水线其实学习游戏引擎,前期对于任何岗位来说路线都是相似的,基本上就是一个熟悉基本操作理解基本概念拓展专业知识的过程。当然这不是绝对的,任何引擎的开始阶段和大成阶段都是相似的。 这是【游戏开发那些事】第51篇原创 前言:游戏引擎,表面...

    未东兴 评论0 收藏0
  • 课时89.CSS三大特性练习(理解)

    摘要:给大家补充一点通配符是不参与权重计算的,因为通配符的权重是,而权重只计算,类,标签,将来还有一种,到后面说。练习直接选中和间接选中的,必然要听直接选中的。练习直接选中一共有两个,直接比较这两个直接选中的权重大小,听从权重大的。给大家补充一点:通配符是不参与权重计算的,因为通配符的权重是0,而权重只计算id,类,标签,将来还有一种,到后面说。 练习1 直接选中和间接选中的,必然要听直接选中的...

    马龙驹 评论0 收藏0
  • 课时44.表单标签-input(掌握

    摘要:什么是表单表单是专门用收集用户信息的什么是表单元素什么是元素在中,标签标记元素都是指中的标签例如标签标记元素表单元素其实还是中的一些标签,只不过这些标签比较特殊,在浏览器中所有的表单标签都有特殊的外观和默认的功能表单的格式表单元素常见的表单1.什么是表单? 表单是专门用收集用户信息的 2.什么是表单元素? 2.1什么是元素? 在HTML中,标签/标记/元素都是指HTML中的标签 例如: a标...

    everfly 评论0 收藏0
  • 课时46.label标签(掌握

    摘要:我们点击注册页面,发现了一个问题,当我们点击密码两个字的时候,输入框聚焦了,而点击确认密码的时候,输入框也聚焦了,而我们上节课做的页面,这么点击,并不聚焦默认情况下文字和输入框是没有关联关系的也就是说点击文字输入框是不会聚焦,如果想点击文字我们点击QQ注册页面,发现了一个问题,当我们点击密码两个字的时候,输入框聚焦了,而点击确认密码的时候,输入框也聚焦了,而我们上节课做的页面,这么点击,并不...

    nevermind 评论0 收藏0
  • 课时53.video标签第二种格式(掌握

    摘要:由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人都视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候为了解决这个问题,所以推出了第二种标签的格式如何查看浏览器支持什么格式的视频视频我们从水平方 由于视频数据非常非常的重要,所以五大浏览器厂商都不愿意支持别人都视频格式,所以导致了没有一种视频格式是所有浏览器都支持的,这个时候W3C为了解决这个问题,所以推出了第二种...

    tain335 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<