众所周知，对于CSS中权重的顺序，从大到小依次如下：

  • !important
  • id
  • class
  • 标签

在html标签中写入行内样式style，又大于link引入。相同类型的样式标记，在数量上多的大于数量少的，!important也不例外
但还有另外一种特例，例如宽度（width），即使对width定义了最高级别的!important，一旦一个class对其宽度做了最大限制，即max-width，最终也是class完胜。
所以说，以上列举的顺序并不能完全决定一个节点的最终样式
在传统的解说中，一般会以数字的形式表示权重，造成的误解就是，以为11个class可以大于1个id

另类解说

通过以上的大众说明，从另一个角度对其进行解释，如下：

决定一个节点最终采用哪种样式，取决于两方面，称其为等级压制和属性压制，并且在属性压制存在的情况下，该属性无视等级

对应到游戏中，很容易理解，在同样装备和属性下，等级越高可以无视等级低的攻击，但在某个特定属性上，等级高的还是会输给等级低的

可喜的是，这种特定属性并不多，列举如下：

  • max-*
  • min-*

CSS 关于权重的另类解说的更多相关文章

  1. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  2. 前端开发之-------------合理利用CSS的权重----------------

    什么是CSS的权重?对于前端工程师来说,这是一个很基础的问题,如果前端工程师没有深刻理解这个概念,则很难写出高质量的CSS代码. 那么到底什么是CSS的权重呢?我们又怎么来进行判定CSS的权重呢? 讨 ...

  3. CSS特异性（CSS Specificity）的细节之CSS样式权重的计算与理解（CSS样式覆盖规则）

    本篇讲解CSS特异性(CSS Specificity)的细节,也就是CSS样式选择器的权重计算 通过计算选择器的权重(weight)最终决定哪个选择器将获得优先权去覆盖其他选择器的样式设定,即“优先原 ...

  4. CSS的权重（转）

    CSS写的渐渐多了,他的权重问题就不得不昂首面对,之前一直得过且过的将就用着,直到最近遇到了几个大坑,一直割刺着我对前端的热情,得了得了,蒙不过去了,就发点时间记下来吧,当然还是一片转载的文章,有时候 ...

  5. Uint 5.css继承权重,盒模型和border padding

    一 .css的继承性和权重 1.1 继承性:继承是CSS的一个主要特征,它是依赖于祖先-后代的关系的.继承是一种机制,它允许样式不仅可以应用于某个特定的元素,还可以应用于它的后代. 可以被继承的属性有 ...

  6. CSS选择器权重计算

    CSS各种选择器的权重: 1.ID选择器  +100 2.类.属性.伪类选择器   +10 3.元素.伪元素选择器   +1 4.其他选择器   +0 如果有两个CSS样式都作用于某元素,如: #id ...

  7. CSS 选择器权重计算规则

    其实,CSS有自己的优先级计算公式,而不仅仅是行间>内部>外部样式:ID>class>元素. 一.样式类型 1.行间 <h1 style="font-size: ...

  8. CSS样式权重的级联cascade的概念

    我们知道,firefox在众多浏览器中是对css 2高度兼容的一款浏览器,那是我能够编写一个中型b2b网站的时候(并不能说是我遇到过的难题)在禅意花园中看到的一个案例,说的是某个菜单在css中定义了以 ...

  9. 【CSS】简略说明css的权重之分

    /*权重 :id > class > 标签 (小环境) 权重:内联 > 内部 > 外部 (大环境) 小环境处于内部环境中 */ <style> #p1{ /* id ...

随机推荐

  1. Python 的第一个小程序

    F盘   新建文本文档 hello.txt 内容为: print("hello world! hello 2018!"); 打开CMD cd c:\                 ...

  2. IRP小结 0x01 IRP & IO_STACK_LOCATION(结合WRK理解)

    写博客整理记录一下IRP相关的知识点,加深一下印象. 所有的I/O请求都是以IRP的形式提交的.当I/O管理器为了响应某个线程调用的的I/O API的时候,就会构造一个IRP,用于在I/O系统处理这个 ...

  3. python-之-深浅拷贝二（元组）

    元组比较特殊 1.----元组本身为不可变类型 import copy v1 = (1, 2, 3, 4) v2 = copy.copy(v1) print(id(v1), id(v2)) v3 = ...

  4. ubuntu安装后问题

    ubuntu安装后桌面显示不正常,出现闪屏,或者是缺图标的问题多数是ubuntu的3D加速显示问题 解决方法,vmware workstations 中的菜单栏:虚拟机->设置->显示器- ...

  5. Python字符串与格式化的一点用法

    #python的基本语法网上已经有很多详细的解释了,写在这里方便自己记忆一些 1.python于C语言不同的是,python没有字符的概念,所谓的字符就是长度为1的字符串,使用切片或者索引同样可以对字 ...

  6. APP在线课程设计

    VR在线课程是我们的主打产品,分为“人工智能鱼”.“海洋史”.“濒危海洋动物保护”.“生物进化”.“海洋知识科普”和“海洋法律”等六大主题,其中“人工智能鱼”为主打特色课程,每个主题也设置了不同难度系 ...

  7. ASP.NET Core2.2 IExceptionFilter

    用vs2017建立一个ASP.NET Core Web应用程序并选择MVC框架,自动生成了 Startup的类,并配置了错误处理方式: if (env.IsDevelopment()) { app.U ...

  8. elasticsearch(4) 轻量搜索

    一 空搜索 搜索API的最基础的形式是没有指定任何查询的空搜索 ,它简单地返回集群中所有索引下的所有文档: 示例 GET 127.0.0.1:9200/_search 响应 { , "tim ...

  9. TCP学习总结(三)

    TCP的流量控制 1.利用滑动窗口实现流量控制 所谓流量控制,就是让发送方的发送速率不要太快,要让接收方来得及接收.利用下图来说明如何利用滑动窗口机制进行流量控制: 一开始(connect后),B告诉 ...

  10. makefile笔记4 - makefile命令

    每条规则中的命令和操作系统 Shell 的命令行是一致的. make 会一按顺序一条一条的执行命令,每条命令的开头必须以[Tab]键开头,除非,命令是紧跟在依赖规则后面的分号后的. 在命令行之间中的空 ...