HTML中定义多个class属性无效


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

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

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

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

1

2

3

<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中文网其它相关文章!

相关阅读:

marquee元素如何实现滚动字体与图片的效果

HTML的TextArea怎么保存格式

以上就是HTML中定义多个class属性无效的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html隐藏属性如何使用

html 图像标记 meta标签 内联框架 超链接

html5表单相关元素和属性

使用html制作简单登录页面的方法

html怎么添加图片

html实现像百度的首页效果一样的背景图(代码)

html怎么实现内容超出自动隐藏

html 元素

浅谈html img标签中的srcset属性

html怎么实现音乐隐藏

更多相关阅读请进入《Class》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...