！important的认知

// html
    <div class="foo">
        Lorem
        <span class="bar">ipsum</span>
        dolor sit amet...
    </div>

    // css
    .foo .bar  {
       color: red;
    }
    .bar {
       color: green;
    }

效果如：

这里应该十分清楚，因为.bar的权值没有.foo .bar 的权值高，所以会选择使用了高权值对应的CSS样式，字体是红色。我们想要的是让ipsum的字体颜色变成绿色。

// bad 很多人可能都会直接写!import(但是不推荐这样去写)
.foo .bar  {
    color: red;
}
.bar {
    color: green !important;
}

下面是一种非常推荐的写法（我猜大多数人都应该还不知道吧）

// good
.foo .bar  {
    color: red;
}
.bar.bar.bar.bar.bar.bar {     // 备注： 个数大于两个，而且中间不能有任何间隙            
    color: green;
}

转载：https://blog.csdn.net/mangoyiy/article/details/79664100