如果div的多个class中display设置不一样，哪个会起作用？绝对出乎你的意料

比如：

<div class="hide html_css">some text</div>

 

其中：

.html_css {
    display:inline-block;
}

.hide {
    display:none;
}

 

结果发现，这个元素会显示，一想也有道理，hide在前html_css在后，调换一下顺序应该就可以了

<div class="html_css hide">some text</div>

 

发现还是会显示

在 Firefox/Chrome 中计算出的样式是 display:inline-block; 另外一个hide类的样式被删除了

各位，你碰到过吗？这怎么解释？

为了达到同样的效果，之后加上了 style="display:none;" 才使它真的不显示了。

 

• 源文【如果div的多个class中display设置不一样，最后哪个会起作用？】最新版，请访问：
     http://www.vktone.com/articles/two_classes_display_conflict.html

 

 

 

评论

4 楼 daodejing 2013-01-20  

引用

采用哪种样式跟class中的定义顺序无关，跟在style块中出现的顺序有关

受教了

3 楼 kidneyball 2013-01-20  

firefox和safari下测试均同2楼

2 楼 kidneyball 2013-01-20  

在chrome下测试没有发现所说的问题，采用哪种样式跟class中的定义顺序无关，跟在style块中出现的顺序有关，后面的style的会覆盖前面的style。例如

.html_css {
    display:inline-block;
}

.hide {
    display:none;
}

则.hide生效，

.hide {
    display:none;
}

.html_css {
    display:inline-block;
}

则.html_css生效。

楼主用的是什么浏览器？

1 楼 daodejing 2013-01-20  

这是什么原因呢？