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

 

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

 

　　<divid="p"class="middle_divpadding_10">

 

　　<spanid="s"class="normal_span"></span>

 

　　</div>

 

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

 

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

 

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

 

　　这。。。。

 

　　难道是？？？

 

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

 

　　刷新浏览器，红色！！！

 

　　所以呢，在定义多个class值的时候，一定要注意，把自己最喜欢的样式放在后面！

 

　　但是呢，如果你在padding_10前面加个div（假设父级元素是div），变成div.padding_10，然后你会发现，不管它在哪，我们的pdiv始终是绿色的，

 

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





本文转载自中文网