// 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;
}
网友评论