HTML中定义多个class属性无效-木庄网络博客

本文摘自PHP中文网，作者php中世界最好的语言，侵删。

这次给大家带来HTML中定义多个class属性无效，HTML中定义多个class属性无效的注意事项有哪些，下面就是实战案例，一起来看一下。

在编写html的过程中，我们会经常为class属性定义多个值，但是同样会经常发现自己定义的值无效！！！

以前碰到这种情况我就直接重写了，或者直接用id设置css属性，今天想起来好像有些不对哦。。。我必须得去发现真理！！！

<div id="p" class="middle_div padding_10"> 
<span id="s" class="normal_span"></span> 
</div>

我在两个class里设置的颜色不同，在middle_div里设置的是红色，在padding_10里设置绿色，

结果显示的是绿色，这给我的第一感觉就是：方向反了！

于是我把两个位置对换，还是绿色！！

这。。。。

难道是？？？

打开css文件一看，果然padding_10在middle_div 前面，然后我把他们俩位置对换，

刷新浏览器，红色！！！

所以呢，在定义多个class值的时候，一定要注意，把自己最喜欢的样式放在后面！
但是呢，如果你在padding_10前面加个div（假设父级元素是div），变成div.padding_10，然后你会发现，不管它在哪，我们的p div始终是绿色的，

从这个例子可以看出来，css样式的优先级是在加载css文件的时候就确定下来的，而不是由后来html里class属性位置前后决定的。

相信看了这些案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

相关阅读 >>

ae和html的区别是什么

html语言中tr是什么意思

html marquee标签如何实现上下滚动，marquee标签的滚动速度设置

在html中float不属于盒子属性吗

html tt标签怎么用

html frame标签怎么使用？frame标签的用法介绍（附实例）

xml和html之间的区别有哪些

html中 table鼠标拖拽排序功能的实现

html dl标签作用是什么？html dl标签的属性介绍和使用方法详解

html文件的中文乱码问题与在浏览器中的显示问题