css选择器权重及其计算规则_权重为1和权重为2哪个好-程序员宅基地

技术标签: 选择器  css  规则  HTML/CSS  权重  计算  

css选择器



选择器类型

  • ID  #id

  • class  .class

  • 标签  p

  • 通用  *

  • 属性  [type=“text”]

  • 伪类  :hover

  • 伪元素  ::first-line

  • 子选择器、相邻选择器

css选择器权重值

选择器 权重
!important 权重
!important Infinity(无限大)
行列样式 1000
Id选择器 0100
Class选择器/属性/伪类 0010
标签选择器 0001
*通配符选择器 0000 (大于默认样式与继承验样式)
继承样式 权重最小(比*通配符还小)

注意:选择器的权重值不是一个确定的值,例如标签选择器的权重值为1,但是这个1是一个256进制数,就是0到255后+1才是1。就是说权重值2和1中间差了255。这表示256个权重值为1的选择器加一起才抵得上一个权重为2的,这在后面权重计算有用。
还有需要注意的是,!important的权重值虽然是正无穷,但其实也是可也计算的,比如正无穷+1或者*1,就是要比正无穷大,在计算机中正无穷的值,都是一个有界的。不是数学上无界的一个慨念!


权重计算方法

一般而言,选择器越特殊,它的优先级越高。也就是选择器指向的越准确,它的优先级就越高。单一选择器直接比较权重,多个选择器则需要计算。
复杂的计算方法:

  • 用1表示派生选择器的优先级
  • 用10表示类选择器的优先级
  • 用100标示ID选择器的优先级
    • div.test1 .span var 优先级 1+10 +10 +1
    • span#xxx .songs li 优先级1+100 + 10 + 1
    • #xxx li 优先级 100 +1
案例

在这里插入图片描述在这里插入图片描述

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_42068550/article/details/89364123

智能推荐

QQ、微博登录网站源代码-程序员宅基地

文章浏览阅读144次。http://www.cnblogs.com/grefr/p/6089075.html 转载于:https://my.oschina.net/u/3001971/blog/895169..._微博登录注册网站代码

TiDB 重要监控指标详解_tidb 读写队列监控-程序员宅基地

文章浏览阅读903次。TIDB指标监控_tidb 读写队列监控

java程序阅读填空题_JAVA练习题-程序员宅基地

文章浏览阅读2.6k次。@font-face{ font-family:"Times New Roman"; } @font-face{ font-family:"宋体"; } @font-face{ font-family:"Calibri"; } @font-face{ font-family:"Courier New"; } mso-level-number-format:lower-roman; mso-leve..._下面哪个修饰符修饰的方法只能被本类中的其他方法使用

QT 操作 QLabel_textselectablebymouse-程序员宅基地

文章浏览阅读2.1k次。内容可以被选择QLabel* label = new QLabel;label->setTextInteractionFlags(Qt::TextSelectableByMouse);enum TextInteractionFlag { NoTextInteraction = 0,//没有文本交互:只有展示的功能 TextSelectableByMouse = 1,//文本可以被鼠标选择 TextSelectableByKeyb_textselectablebymouse

领扣LintCode算法问题答案-792. 第K个质数_从小到大找到所有的质数,输出第k个质数-程序员宅基地

文章浏览阅读734次。领扣LintCode算法问题答案-792. 第K个质数目录792. 第K个质数题解鸣谢792. 第K个质数给出质数n,输出它是第几个质数。n <= 100000。质数定义为在大于1的自然数中,除了1和它本身以外不再有其他因数。样例 1:输入: n = 3输出: 2解释:[2,3,5],3是第2个质数。样例 2:输入: n = 11输出: 5解释:[2,3,5,7,11],11是第五个质数。题解public class Solution { /**._从小到大找到所有的质数,输出第k个质数

Java实现简单的俄罗斯方块游戏_java俄罗斯方块代码运行结果-程序员宅基地

文章浏览阅读322次,点赞3次,收藏2次。本篇文章,主要讲述了如何用Java实现一个简易的俄罗斯方块小游戏_java俄罗斯方块代码运行结果

随便推点

有哪些好用的实时网络流量监控软件_交换机流量监控软件-程序员宅基地

文章浏览阅读7.2k次,点赞3次,收藏6次。NetFlow Analyzer可用于监控网络的关键流量指标,如网络速度、顶级会话、带宽利用率和主要使用时间。这种实时网络流量监控软件部署简单,使用起来很容易。安装之后,设置网络设备以将流数据导出到NetFlow Analyzer。在几分钟内,就会绘制出流量图,并自动生成数字报告,您就可以全部设置为监控网络中的流量了。..._交换机流量监控软件

对话框和常用控件_idd_formview-程序员宅基地

文章浏览阅读5.2k次。对话框是Windows应用程序中最重要的用户界面元素之一,是与用户交互的重要手段,在程 序运行过程中,对话框可用于扑捉用户的输入信息或数据。对话框是一个特殊类型的窗口,任何对窗口进行的操作(如:移动、最大化、最小化等)都可在对话框中 实施,一般来说,在对话框中通过各种控件(如:按钮、编辑框、列表框、组合框等)来和用户进行交互。控件是在系统内部定义的用于和用户交互的基本单元。一、对话框的使用 Visual C++提供的对话框编辑器能“可视”地进行设计、编辑,并可用

复制粘贴快捷键_复制和粘贴快捷键ctrl加什么-程序员宅基地

文章浏览阅读3.8k次。右手快捷键,右手复制,右手粘贴_复制和粘贴快捷键ctrl加什么

多模态系列论文--BLIP 详细解析_blip模型-程序员宅基地

文章浏览阅读1.1k次,点赞4次,收藏4次。所以作者用生成的文本充当新的训练数据集,具体的,作者在coco数据集上把已经训练好的image grounded text decoder又微调了一下,得到了captioner,然后给定任意一张从网上爬下的图片,用这个captioner给这个图片生成新的字幕,也就是红色这里的ts,经过filter筛选后,添加到数据集中,它是synthetic data。(Ih,Th)是手工标注的Coco数据集。这样就用统一的一个模型,即训练的时候是一个模型,推理的时候可以根据不同的任务选择这个模型中的某一部分去做推理。_blip模型

MCAL-基于Infineon-TC3xx芯片的ADC模块-程序员宅基地

文章浏览阅读795次,点赞8次,收藏19次。MCAL是MicroController Abstraction Layer(微控制器抽象层)的缩写。MCAL位于AUTOSAR软件架构中基本软件(Basic Software,BSW)的底层,如下图橙色部分,是可以直接访问MCU寄存器和内部外设的底层驱动。这样划分的目的是使上层软件(如ECU抽象层、系统服务层等)独立于MCU硬件平台,保证上层软件的标准化和通用性。

Java获取当前项目文件路径、项目编译路径、获取项目根路径_java 当前文件路径-程序员宅基地

文章浏览阅读1.1k次。项目获取项目根目录,编译目录,文件路径_java 当前文件路径

推荐文章

热门文章

相关标签