CSS权重中的越级现象
CSS（层叠样式表）通过多重层叠样式间各自权重的比较计算，来决定那一层样式应该最终发挥作用。这也是css中“层叠”意思的具体体现。
权重的一般规则，一般是 ！importent > 内联样式 > id > class > 元素选择器 > * 。
但真实的应用中往往没这么简单，经常是 各级选择器搭配嵌套使用，如 div.nav或者 .nav .bar,这时就涉及到权重的具体计算。
CSS中样式的权重计算采用的是进制形式：（内联样式）.（id）.（class）.(元素)
举例：
元素选择器： p 权(1)重： 0.0.0.1
类选择器： .nav权重(10)：0.0.1.0
id选择器：#sec权重(100)：0.1.0.0
内联样式：style=”“ 权重(1000)：1.0.0.0
混合型：#sec .nav p 权重: 0.1.1.1重点内容
但是采用的进制并不是简单的十进制，体现为 叠加十层class选择器的权重并不会高于1个id选择器：
重点内容
.class1.class2.class3.class4.class5.class6.class7.class8.class9.class10.class11<#id
不同浏览器采用不同大小的空间来存储每一位上的权重值：如firefox和ie都是用的8位来存储class位的权重值，也就是2^8=256。当叠加26层class时权重为10*26=260，就会发生溢出，向id位进一，权重为大于一个单一的id选择器.此时26层class的样式会在forefox上发挥作用，覆盖住id选择器的样式效果。
也就是说：当被比较的两个选择器的最高权重位相同时才具有可比性（最高位都是id或者都是class的选择器），最高权重位不在同一级时，权重位高的选择器的权重永远大于权重位低的选择器（id永远大于class），只有当低权重位上的值大到超出存储范围，发生溢出（26个class的权重超出存储范围，溢出进位到id位上）相当于权重进一级时，才能与高一级进行权重大小的比较。
CSS权重中的越级现象相关推荐
- 面试总结（CSS 的盒模型？、CSS 中选择器的优先级以及 CSS 权重如何计算？、CSS 中哪些属性可继承，哪些不可以？、CSS 单位中 px、em 和 rem 的区别？、rem 适配....)
CSS 的盒模型? 盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际 内容这几个部分 第一种是 W3C 标准的盒子 ...
- html的css样式中表示后代选择器,css样式,后代选择器
css介绍 CSS(层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). css语法(下图所示) 每个CS ...
- html5类选择器选择权重,Python Html5和CSS3的新增功能：CSS权重与CSS3新增选择器
一.CSS权重概念 CSS权重概念:指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式. 二.权重的等级 2.1.权重的等级划分 ...
- float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
- css规则中区块block,css常用属性总结：背景background下篇
前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...
- css权重计算方法浅谈
在这之前只知道css权重的皮毛,比如说:行内权重比头部权重高,头部比外部样式权重高----工作中才知道真正理解css权重重要性.理解权重了才能写出来最优css选择器来.对后面学习less,scss有很 ...
- html css控制优先级,css权重及优先级问题_html/css_WEB-ITnose
css权重及优先级问题 几个值的对比 初始值 指定值 计算值 应用值 CSS属性的 指定值 (specified value)会通过下面3种途径取得: 在当前文档的样式表中给这个属性赋的值,会被优先使 ...
- 【HTML/CSS】CSS权重、继承及引入方式
1 CSS权重 1.1 权重规则 CSS匹配的选择器中每一种选择器类型的数组决定了选择器的权重,CSS的优先级规则: 权重高的样式会被应用到元素上. 如果权重相同则使用最后声明的样式. 属性后加上!i ...
- 深入理解CSS权重(优先级)
对于上一篇:你应该知道的一些事情--CSS权重 ,实战时会遇到一些实际的问题,本篇继续加重对css优先级的理解.最近跟公司同事分享session时在谈到CSS优先级权重问题,引入了之前一直在网上公认的 ...
最新文章
- Java 8 开发的 4 大顶级技巧，你都知道吗 ？
- SCA与spring集成（在spring中开发SOA）
- 编程开发之--java多线程学习总结（5）
- 人工智能和机器人将成为数据中心最佳“伴侣”
- python baseexception_python 的err输出BaseException
- TYUT-A专题题解（一）
- 图片打散存储JAVA_通过java的i/o机制进行图片流的存储以及对网络图片的存储
- flink sql运用入门
- JavaScript函数思维导图
- 证券计算机行业研究,首创证券-计算机行业深度报告：物联网，研究框架-行业分析-慧博研究报告资讯...
- Overfeat论文笔记
- 联创机房管理系统服务器密码,高校机房管理系统解决方案.doc
- ClickHouse 创建数据库建表视图字典 SQL
- 涨知识：当前主流服务器操作系统的三大流派！
- ot permission denied while trying to connect to the Docker daemon socket at
- 手机linux游戏,无聊的教室游戏下载(附攻略)-无聊的教室手机版v1.0.0-Linux公社
- Parameter index out of range (2 ＞ number of parameters, which is 1).原因及处理
- 元宇宙-漫游世界后与Cocos一起看湖南卫视直播
- 【智能算法】基于双隐含层BP神经网络的预测
- 微信支付-APP支付