• 技术文章 >web前端 >html教程

    HTML中定义多个class属性无效

    php中世界最好的语言php中世界最好的语言2018-02-08 09:40:43原创3066

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

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

    相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

    相关阅读:

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

    HTML的TextArea怎么保存格式

    以上就是HTML中定义多个class属性无效的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:class HTML 属性
    上一篇:html里怎样实现异步上传文件 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • 为什么是这样的?_html/css_WEB-ITnose• 如何考评一名前端工程师?_html/css_WEB-ITnose• rem : web app适配的秘密武器_html/css_WEB-ITnose• CSS介绍、选择器_html/css_WEB-ITnose• [翻译]解读CSS中的长度单位_html/css_WEB-ITnose
    1/1

    PHP中文网