Fork me on GitHub

class的顺序问题

发表于 | 更新于 | 本文总计 239 字

 其实之前我一直以为样式表中的class设定，有那么一个规则即相同样式属性的声明，后续声明的会覆盖之前的…然后我就被打脸了。

  先说结论：在CSS文件中，对同一属性作用的样式类，后声明的class具有更高的优先级且在HTML元素中列出class顺序与生效的优先级并无关联，所以看到以下的html，最终输出的是两个蓝色的hi，因为样式表中，.blue先被声明了。

1
2
3
4
5
6
<div class='red blue'>
    hi
</div>
<div class='blue red'>
    hi
</div>
1
2
3
4
5
6
.red {
    color: red;
}
.blue {
    color: blue;
}