Question

关于css样式优先级的问题。

针对一个元素我有两套样式，.css1{}和.css2{}，我当前用的是.css1{}，这时我用js中的addclass给这个元素中添加.css2{}。这时的元素class为 css1 css2了，我就想问一下，这个时候用的上面的那套样式？为什么？ 如果可以请说明一下css中关于优先级的知识（外加20分）。

Answer 1

<div class="css1 css2"></div>此时如果css1和css2有相同的属性，css2会覆盖css1，跟位置有关，在后的就会覆盖前面的。如果有三个class，css1 css2 css3 那么css3会覆盖前面两个样式，前提是它们有同样的属性，如果不同的话，这个div的样式就是两个之和。例如
.css1 {
width:300px;
height:100px;
font-size:14px;
}
.css2 {
font-size:12px;
fotn-weight:bold;
}
那么此时font-size:12px;会覆盖掉font-size:14px;其他的保留。

Answer 2

<div class="css1 css2"></div>属于继承关系，如果css1有的样式 css2没有那么以1的样式存在 如果2定义了跟css1冲突的样式，采用就近原则以2为标准，这个继承方式跟父子继承差不多，css2可以继承css1的样式，但是同时css2又可以重新规定自己的属性。

Answer 3

这个要看你样式表里是怎么写的，如：
.css1{}
.css2{}
这个写的话就会用到CSS2的样式，如：
.css2{}

.css1{}

这样还是用的CSS1的样式
它的优先级是要看权重的。如如果权重一样那么后面的就会复盖前面的。

权重参考：可在百度里搜索“CSS 权重”

Answer 4

css中后面的会覆盖前面的,但是可以用!important设置为高优先级.
同有!important的,还是后面覆盖前面

Answer 5

Vue实践-CSS样式position/display/float属性对比使用