南强小屋 Design By 杰米
在编写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属性位置前后决定的。
标签:
html,多个class属性,优先级

南强小屋 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
南强小屋 Design By 杰米

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

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

P70系列延期,华为新旗舰将在下月发布

3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。

而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?

根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。