CSS 关于权重的另类解说
众所周知,对于CSS中权重的顺序,从大到小依次如下:
- !important
- id
- class
- 标签
在html标签中写入行内样式style,又大于link引入。相同类型的样式标记,在数量上多的大于数量少的,!important也不例外
但还有另外一种特例,例如宽度(width),即使对width定义了最高级别的!important,一旦一个class对其宽度做了最大限制,即max-width,最终也是class完胜。
所以说,以上列举的顺序并不能完全决定一个节点的最终样式
在传统的解说中,一般会以数字的形式表示权重,造成的误解就是,以为11个class可以大于1个id
另类解说
通过以上的大众说明,从另一个角度对其进行解释,如下:
决定一个节点最终采用哪种样式,取决于两方面,称其为等级压制和属性压制,并且在属性压制存在的情况下,该属性无视等级
对应到游戏中,很容易理解,在同样装备和属性下,等级越高可以无视等级低的攻击,但在某个特定属性上,等级高的还是会输给等级低的
可喜的是,这种特定属性并不多,列举如下:
- max-*
- min-*
CSS 关于权重的另类解说的更多相关文章
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端开发之-------------合理利用CSS的权重----------------
什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码. 那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢? 讨 ...
- CSS特异性(CSS Specificity)的细节之CSS样式权重的计算与理解(CSS样式覆盖规则)
本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...
- CSS的权重(转)
CSS写的渐渐多了,他的权重问题就不得不昂首面对,之前一直得过且过的将就用着,直到最近遇到了几个大坑,一直割刺着我对前端的热情,得了得了,蒙不过去了,就发点时间记下来吧,当然还是一片转载的文章,有时候 ...
- Uint 5.css继承权重,盒模型和border padding
一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...
- CSS选择器权重计算
CSS各种选择器的权重: 1.ID选择器 +100 2.类.属性.伪类选择器 +10 3.元素.伪元素选择器 +1 4.其他选择器 +0 如果有两个CSS样式都作用于某元素,如: #id ...
- CSS 选择器权重计算规则
其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...
- CSS样式权重的级联cascade的概念
我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...
- 【CSS】简略说明css的权重之分
/*权重 :id > class > 标签 (小环境) 权重:内联 > 内部 > 外部 (大环境) 小环境处于内部环境中 */ <style> #p1{ /* id ...
随机推荐
- BUG调试: Jump to the invalid address stated on the next line at 0x0: ???
gdb或者vlagrind报告: ==14569== Jump to the invalid address stated on the next line ==14569== at 0x0: ??? ...
- apk的api级别不要低于26
谷歌要求 api级别 最低26, 在用 xbuliber打包app的时候,可以在 manifest.json增加下面的代码. "plus": { "distribute& ...
- Python条件判断 if-else for循环 while循环 break continue
条件判断 if-else if-else语句是通过if 后面的是否为真,当为True,就执行if代码块后面的,如果为False,同时又有else语句,执行else后面的内容.没有else,什么都不执行 ...
- centos7 下zookeeper 部署 单机多实例模式
centos7 下zookeeper 部署 本文参考https://www.linuxidc.com/Linux/2016-09/135052.htm 1.创建/usr/local/zookeeper ...
- Java 平时作业七
以下是几本计算机书籍的基本信息 编号 书名 价格 出版社 1 JAVA 基础 32 清华大学出版社 2 JAVA WEB 开发 40 电子工业出版社 3 ...
- 斐讯K2 22.5.9固件刷华硕固件实测教程
斐讯K2最新的固件是V22.5.9.163这个版本是锁死了,不能刷机的,而且不能降级到原来的可以刷机的老版本固件,也就不能刷第三方固件了,怎么破呢?下面就教大家怎么降级刷机到V22.4.2.8固件. ...
- day 29 元类
---恢复内容开始--- 一.元类的介绍 元类:在python里,一切皆对象.所有自定义的类本身也是元类的对象,即所有自定义的类本质上也是由元类实例化出来的. class关键字创建自定义类的底层的工作 ...
- 集合List的排序
自从出现了泛型和LINQ,对于集合的排序变得更简单了. //倒序 list.OrderByDescending(p=> p.a).ThenByDescending(p => p.b); / ...
- dos5章
一.用set命令设置自定义变量 显示.设置或删除 cmd.exe 环境变量. SET [variable=[string]]variable 指定环境变量名.string 指定要指派给变量的一系列字符 ...
- iOS原生 和 react native视图混编
在iOS原生功能中加入RN,请看之前 写的 RN与iOS交互系列文章.本篇只讲下视图混编. 关键点只有二: 1.通过 RCTRootView 加载RN视图. 2.RN中,只需要AppRegistry. ...