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

热度：117 发布时间：2013-01-26 13:47:02.0

如果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

1 楼 daodejing 2013-01-20

这是什么原因呢？

2 楼 kidneyball 前天

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

.html_css {
    display:inline-block;
}

.hide {
    display:none;
}

则.hide生效，

.hide {
    display:none;
}

.html_css {
    display:inline-block;
}

则.html_css生效。

楼主用的是什么浏览器？

3 楼 kidneyball 前天

firefox和safari下测试均同2楼

4 楼 daodejing 前天

引用

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

受教了