CSS权重

Posted on | In
强迫症害死人

css权重

　　经常会遇到这样一种问题，为什么我写的css并没有达到我所期望的效果，很奇怪我注释掉这行代码对页面并没有什么影响–
　　也是自己对css规则并没有一个透彻的了解..
　　这里就来简单写一下关于css的权重，我觉得了解了权重的概念，能让你写css时更加得心应手，减少一些代码冗余和调试时间
　　权重也就是你这个元素选择器能PK掉其他选择器的几率，当然权重大的就能被浏览器在页面元素上应用（相同权重就以最后出现的为准 很容易理解 后面覆盖前面嘛），一个元素css规则可以从特定ID或类选择器得到，也可以继承而来，如果你从外部引入了一些框架，还有一些默认的css样式，当然也可以在html中直接定义style（一般这种写法是淘汰的，不适合多文档应用，冗余，修改麻烦等等…）所以权重只有在同一个元素有多个声明的时候有意义..
关于权重级别（越往下权重越大）

  1. 用户代理声明（比如浏览器的一些默认样式 不过经过CSS Reset和Normalize.css 一般我也没有很注重去修改浏览器的默认样式
  2. 开发者选项 F12 我们经常会通过开发者选项来调试看怎样的样式更加符合自己的要求
  3. 开发者声明
    • 选择器（注意嵌套定义 一般是标签越详细 ID或者class级数越多权重越大）
    • 一些插件和框架中的全局css
    • 内在指定style会覆盖外部引用style

!important

前几天在代码的时候发现自己怎么写干不掉框架内部定义的样式 所以就google了一下怎样使用!important 当你在一个样式中声明！important的时候 会直接覆盖掉其他声明 也就是一种增加权重的方式
小范围使用还好 如果在你定义一个全局范围使用的类但是你只需要在这一个地方修改样式 这样修改就会跳出很多Bug 所以怎样使用!important

  1. !important 一般写在样式最后 分号前面 来达到效果
  2. 全局属性内部全部覆盖
    1
    2
    3
    .example{  
         border-radius: 1px !important;                
    }
    等价于
    1
    2
    3
    4
    5
    6
      .example{  
    border-top-right-radius: 1px !important;
    border-bottom-right-radius: 1px !important;
    border-top-left-radius: 1px !important;
    border-bottom-left-radius: 1px !important;             
      }

这里就引用一下我觉得挺重要的几个点：

  • Never 永远不要在全站范围的 css 上使用 !important
  • Only 只在需要覆盖全站或外部 css（例如引用的 ExtJs 或者 YUI ）的特定页面中使用 !important
  • Never 永远不要在你的插件中使用 !important
  • Always 要优化考虑使用样式规则的优先级来解决问题而不是 !important

回来改改错误 嗯..下次见 2016/11/16 　　　　　amilyxy