HTML中定义多个class属性无效

  在编写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属性位置前后决定的。





本文转载自中文网

 

推荐阅读