你对CSS权重真的足够了解吗？

xioqua 发布于2019-08-29 15:27 / 1000人阅读

摘要：如果两个权重不同的选择器作用在同一元素上，权重值高的规则生效选择器可能会包含一个或者多个与权重相关的计算点，若经过权重值计算得到的权重值越大，则认为这个选择器的权重高。

前言

css权重很多人都听过，也了解一些，但是很多人对具体的规则或者说再深如一些关于css权重的问题，可能会不那么清楚。日常开发中，或多或少都会遇到css规则不生效的问题，为了让我们能够减少调试css规则的时间，深刻理解css权重，就十分关键了。如果喜欢的话可以点波赞/关注，支持一下，希望大家看完本文可以有所收获。

个人博客了解一下：obkoro1.com

权重规则总结:

!important 优先级最高，但也会被权重高的important所覆盖

行内样式总会覆盖外部样式表的任何样式(除了!important)

多带带使用一个选择器的时候，不能跨等级使css规则生效

如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.

权重相同时，与元素距离近的选择器生效

css权重优先级用来干嘛？

在同一个元素使用不同的方式，声明了相同的一条或多条css规则，浏览器会通过权重来判断哪一种方式的声明，与这个元素最为相关，从而在该元素上应用这个声明方式声明的所有css规则。

权重的五个等级及其权重

!important;

行内样式;

ID选择器, 权重:100;

class,属性选择器和伪类选择器，权重:10;

  属性选择器指的是:根据元素的属性及属性值来选择元素，比如button的type属性等。
  伪类选择器: :active :focus等选项.

标签选择器和伪元素选择器，权重:1;

  伪元素选择器： :before :after

等级关系:

    !important>行内样式>ID选择器 > 类选择器 | 属性选择器 | 伪类选择器 > 元素选择器

权重规则： 1.不推荐使用!important

不推荐使用!important，因为!important根本没有结构与上下文可言，并且很多时候权重的问题，就是因为不知道在哪里定义了一个!important而导致的。

覆盖important:

虽然我们应该尽量避免使用!important，但你应该知道如何覆盖important，加点权重就可以实现，codepen的demo

    //!important 优先级最高，但也会被权重高的important所覆盖
    
    #a{
      background: blue  !important;  /* id的important覆盖class的important*/
    }
    .a{
      background: red  !important;
    }

2.行内样式总会覆盖外部样式表的任何样式,会被!important覆盖 3.多带带使用一个选择器的时候，不能跨等级使css规则生效

无论多少个class组成的选择器，都没有一个ID选择器权重高。类似的，无论多少个元素组成的选择器，都没有一个class选择器权重高、无论多少个ID组成的选择器，都没有行内样式权重高。

codepen的demo;

    在demo中使用了11个class组成一个选择器，最后还是一个ID选择器，设置的样式生效。

可以想象在玄幻小说的那种等级制度，没有突破那个等级，就没有可比性。

所以权重是在双方处于同一等级的情况下，才开始对比。

4.如果两个权重不同的选择器作用在同一元素上，权重值高的css规则生效

选择器可能会包含一个或者多个与权重相关的计算点，若经过权重值计算得到的权重值越大，则认为这个选择器的权重高。举一个简单的栗子:

    .test #test{ } // id 100+class 10=110;
    .test #test span{} // id 100+class 10+span 1=111;
    .test #test .sonClass{} // id 100+class 10+class 10=120; //生效

5.如果两个相同权重的选择器作用在同一元素上：以后面出现的选择器为最后规则.

demo

    
      
        啦啦啦
      
    
    #test span{
      color:blue;
    }
    #app span{ // 生效 因为后面出现
      color: red;
    }

6.权重相同时，与元素距离近的选择器生效

比如不同的style表，head头部等,来看下面的栗子：

    #content h1 { // css样式表中
      padding: 5px;
    }

建议：

避免使用!important;

利用id增加选择器权重;

减少选择器的个数（避免层层嵌套）;

结语

以上就是本文关于css权重的内容了，如有不对的地方欢迎指正！希望大家看完可以有所收获，喜欢的话，赶紧点波订阅关注/喜欢。

希望看完的朋友可以点个喜欢/关注，您的支持是对我最大的鼓励。

个人blog and 掘金个人主页，如需转载，请放上原文链接并署名。码字不易，感谢支持！本人写文章本着交流记录的心态，写的不好之处，不撕逼，但是欢迎指点。

如果喜欢本文的话，可以关注一下我的订阅号，漫漫技术路，期待未来共同学习成长。

以上2018.5.19

参考资料：

你应该知道的一些事情——CSS权重

深入CSS优先级

css优先级

云服务器 GPU云服务器广告联盟是真的吗 linux系统真的安全吗中国物联网是真的吗 uu492是真的吗

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113335.html

提高深度学习性能的四种方式

摘要：可以参见以下相关阅读创造更多数据上一小节说到了有了更多数据，深度学习算法通常会变的更好。导语我经常被问到诸如如何从深度学习模型中得到更好的效果的问题，类似的问题还有：我如何提升准确度如果我的神经网络模型性能不佳，我能够做什么？对于这些问题，我经常这样回答，我并不知道确切的答案，但是我有很多思路，接着我会列出了我所能想到的所有或许能够给性能带来提升的思路。为避免一次次罗列出这样一个简单的列表...

JessYanCoding 2019-04-25 18:06 评论0 收藏0
前端面试每日3+1（周汇总2019.08.11）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目...

Baoyuan 2019-08-30 15:44 评论0 收藏0
前端面试每日3+1（周汇总2019.08.11）

摘要：前端面试每日题，以面试题来驱动学习，每天进步一点让努力成为一种习惯，让奋斗成为一种享受相信坚持的力量项目地址推荐欢迎跟一起折腾前端，系统整理前端知识，目前正在折腾，打算打通算法与数据结构的任督二脉。《论语》，曾子曰：吾日三省吾身（我每天多次反省自己）。前端面试每日3+1题，以面试题来驱动学习，每天进步一点！让努力成为一种习惯，让奋斗成为一种享受！相信坚持的力量！！！项目...

马永翠 2019-08-26 10:42 评论0 收藏0
【Hello CSS】第五章-CSS的选择器与函数

摘要：内联样式标签鱼头注根据张鑫旭老师在有趣个选择器可以干掉个选择器分享过个级联选择器可以击败个选择器目前已无此现象。作者：陈大鱼头 github： KRISACHAN 在上一篇的HTML的标签与语意中简单的介绍了HTML标签跟其一些属性，向各位坚持看到这里的亲表示真诚的感谢。本篇主要会分享一些跟CSS选择器（CSS Selectors）相关的内容，有兴趣的请继续往下看。 CSS选择...

cod7ce 2019-08-30 11:27 评论0 收藏0
谷歌大神Jeff Dean：大规模深度学习最新进展

摘要：在与李世石比赛期间，谷歌天才工程师在汉城校区做了一次关于智能计算机系统的大规模深度学习的演讲。而这些任务完成后，谷歌已经开始进行下一项挑战了。谷歌深度神经网络小历史谷歌大脑计划于年启动，聚焦于真正推动神经网络科学能达到的较先进的技术。在AlphaGo与李世石比赛期间，谷歌天才工程师Jeff Dean在Google Campus汉城校区做了一次关于智能计算机系统的大规模深度学习（Large-...

legendaryedu 2019-04-25 18:01 评论0 收藏0