文章 专题 AI工具 学习 下载 问答 源码 最近更新
PHP
会员中心 讲师中心 微信公众号
首页 > web前端 > html教程 > 正文

HTML中定义多个class属性无效

php中世界最好的语言
发布： 2018-02-08 09:40:43
原创
4292人浏览过

这次给大家带来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中文网其它相关文章！

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！

下载
相关标签：
php css html class
来源：php中文网
收藏 点赞
上一篇：html里怎样实现异步上传文件 下一篇：html里table表数据如何转为Json格式
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
HTML链接点击后颜色改变怎么设置 HTML链接点击后颜色改变可以通过CSS和JavaScript实现。1）使用CSS的:active伪类可以实现点击时的颜色变化。2）结合JavaScript的onclick事件和setTimeout函数，可以实现更持久的颜色变化效果，增强用户体验。
2025-06-12 17:54:02
521
html中如何插入图片？图片插入步骤教程 在网页开发中，插入图片通过HTML的标签实现。使用该标签时必须设置src属性指定图片路径，并建议填写alt属性以提升可访问性与SEO效果。图片路径分为相对路径和绝对路径，其中相对路径依据HTML文件位置设定，而绝对路径为完整URL。可通过将图片嵌套在标签内实现点击跳转功能，推荐使用CSS控制图片样式如宽高和边框。常见问题包括路径错误、文件名大小写不一致及格式选择不当，推荐优先选用.jpg、.png或.webp格式并仔细检查路径正确性。
2025-06-12 17:33:01
207
html怎么插入PDF文件？PDF嵌入方法详解 要在网页中嵌入PDF并实现在线预览，常用方法有四种：1.使用标签，兼容性好、代码简洁但样式控制有限；2.使用标签，结构清晰便于响应式设计，但移动端支持与类似；3.借助GoogleDocs在线预览，跨平台兼容性强但需联网且国内不可用；4.使用PDF.js本地化展示，高度可定制但部署复杂，适合企业级项目。根据是否依赖外部服务、是否需要移动端适配等因素选择合适方案，并注意测试跨域和样式适配问题。
2025-06-12 17:18:02
331
html中块元素和行内元素区别 html块元素行内元素核心差异对比 块元素和行内元素的主要区别在于布局行为、尺寸控制、margin和padding以及默认样式。1.块元素独占一行，可设置宽高；2.行内元素不独占一行，宽高设置通常无效；3.块元素四方向margin和padding生效，行内元素垂直方向通常无效；4.块元素有默认margin和padding，行内元素无。
2025-06-12 16:48:01
552
html中如何调整图片透明度？透明度设置方法 在HTML中调整图片透明度主要通过CSS实现。第一种方法是使用opacity属性，接受0到1的数值，例如opacity:0.7表示70%不透明；第二种方法适用于背景图，通过rgba或hsla设置带透明度的背景色实现视觉效果；第三种方法使用filter属性结合opacity(60%)调整透明度，但兼容性略差；此外还可结合hover伪类实现动态透明度过渡效果，如默认opacity:0.6并在悬停时变为不透明。选择方式需根据具体需求和场景决定。
2025-06-12 16:27:01
707
html怎么设置页面标题？title标签使用教程 设置网页标题要使用title标签并置于HTML的head部分。title标签不仅显示在浏览器标签页上，还提升SEO效果、增强用户体验以及作为社交分享的基础信息。写好title需控制长度在60字符内，关键词靠前且页面专属不重复。常见错误包括忘记闭合标签、标题杂乱、多页共用标题及将title放至body中。正确设置有助于网站整体表现。
2025-06-12 16:24:01
838
怎么应用HTML模板？复用设计简易指南 如何应用HTML模板提高开发效率？1.选择合适的模板引擎：根据项目复杂度选择Handlebars、Mustache适合小型项目，Pug、Nunjucks适合大型项目；2.定义模板结构：创建包含占位符如{{name}}的HTML模板文件；3.准备数据对象：构造与占位符匹配的JavaScript数据对象；4.渲染模板内容：通过引擎compile方法将模板与数据合并生成HTML；5.封装组件逻辑：将模板与JS封装成组件如UserComponent类提升可维护性。如何选择模板引擎？优先考虑项目复杂度、性
2025-06-12 15:18:04
999
html怎么设置页面背景？背景颜色与图片设置 网页设计中设置页面背景的方法主要有背景颜色、背景图片及两者结合使用。首先设置背景颜色可用CSS的background-color属性，支持颜色名称、RGB、HSL或十六进制值，适合简洁风格；其次设置背景图片通过background-image属性，并配合background-repeat、background-size、background-position和background-attachment等属性优化显示效果；最后可同时使用背景颜色与图片，利用rgba颜色叠加半透明层或简写属性实现遮罩
2025-06-12 15:03:01
830
HTML如何实现过渡效果？transition怎么配合HTML？ transition是CSS中用于实现元素样式渐变过渡的属性，通过指定属性、持续时间、时间函数和延迟来控制动画效果。基本用法是：在CSS中为元素定义transition属性，并结合状态变化（如hover）触发过渡，例如按钮悬停变色。HTML主要提供结构和类名，使CSS能够定位目标元素并应用过渡。常见问题包括属性不支持过渡、初始或目标值不明确、未正确触发变化等。使用技巧有：按需指定具体属性以提升性能，或添加delay参数实现延迟动画。
2025-06-12 14:45:01
459
html中段落首行空格怎么做 html首行缩进的4种实现方法 HTML中实现段落首行空格的方法有4种：1.使用CSS的text-indent属性，简单但不灵活；2.使用CSS的margin-left属性，适合调整整个段落；3.使用伪元素和content属性，灵活但需注意性能；4.使用标签和CSS的display:inline-block属性，精确但增加HTML复杂性。
2025-06-12 13:45:02
239
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
app下载
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部