【CSS】选择器权重:(0,0,1)

CSS 选择器权重

*CSS选择器用3个正整数，来表示选择器的权限*

1. 权重规则

 实体标记 id, class, tag
 排列顺序：id, class, tag
 记数器：选择器中的实体标记数量

2. 权重表示方法

（ 0，   0， 1）
（id,class,tag）
第一个数字表示有多少个id,第二数字表示有多少个class，第三数字表示有多少个tag.

3. CSS 优先级

权重数量越大，CSS选择器权重越大，比如 0,0,2 > 0,0,1

    h1 {
        color: red;
    }
    body h1 {
        color: blue;
    }

如果要将h1的红色改写，可以再写一个权重更大的CSS选择器，如上

这么写的好处：

摆脱了对选择器的限制
不需要修改html源代码

4. 权重注意事项：尽量不要在 html 中使用 id 属性

为什么?
id 权重过大，位于权重顶端
id 会导致选择器弹性不路，不利于调试或复用

5. 权重经典应用场景：class 动态调整样式

如果项目是依赖UI库:bootstrap.css,直接修改bootstrap.css会影响其他依赖此CSS的项目,也不利于后期升级.
建议方案:修改`html.class`,为它添加自定义类
如,项目中用到 .col-md-6,要修改它,可以为它增加一个自定义类.col-md-6.bgc{}的链式类.引用方法:class="col-md-6 bgc"

最新的商业项目,主流都是CSS类叠加