您的位置
主页 > 网站技术 > CSS/HTML > » 正文

HTML中当定义多个class属性时无效的解决方法

来源: 站长圈 点击:

点评:为class属性定义多个值,经常会发现定义的样式无效,经测试,在定义多个class值的时候,一定要注意,把自己最喜欢的样式放在后面,否则无效。

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

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

复制代码代码如下:

<p id="p" class="middle_p padding_10"> 

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

</p> 

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

结果显示的是绿色,这给我的第一感觉就是:方向反了! 

于是我把两个位置对换,还是绿色!! 

这。。。。 

难道是??? 

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

刷新浏览器,红色!!! 

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

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

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




首页  - 关于站长圈  - 广告服务  - 联系我们  - 关于站长圈  - 网站地图  - 版权声明