html 加载多个class，有的只加载了一个，有的两个都加载了，为何？

发布网友发布时间：2022-05-13 10:12

共3个回答

懂视网时间：2022-05-13 14:33

spe_top banner_top 和 spe_top banner_top 这两个分别只有一个有效
header_img spe_img 两个都有效

HTML 代码

	              HOME
   ABOUT
   SERVICE
   GALLERY
   BLOG
   CONTACT

CSS代码

.spe_header{height:150px;}
.header{background:#0CC repeat;height:700px;color:white;}
.spe_top{height:150px;}
.banner_top{background:rgb(0, 229, 238) repeat;height:700px;position:relative;top:0;}
.header_img{margin:0 auto;width:70%;height:800px;background:url(../images/banner.jpg) no-repeat;background-size:cover;position:absolute;top:0;left:230px;}
.spe_img{height:150px;}

回复讨论(解决方案)

.spe_header{height:150px;}.header{background:#0CC repeat;height:700px;color:white;}.banner_top{background:rgb(0, 229, 238) repeat;height:700px;position:relative;top:0;}.header_img{margin:0 auto;width:70%;height:800px;background:url(../images/banner.jpg) no-repeat;background-size:cover;position:absolute;top:0;left:230px;}.spe_img{height:150px;}.spe_top{height:150px;}/*同样优先级的选择器，相同属性的样式，写在后面的会覆盖前面的，要把这行放到后面*/

不是这个意思啊，是有个选择器根本没效果，开始放不了图
spe_top banner_top 和 spe_top banner_top 这两个分别只有一个有效

header_img spe_img 两个都有效

.spe_header{height:150px;}.header{background:#0CC repeat;height:700px;color:white;}.banner_top{background:rgb(0, 229, 238) repeat;height:700px;position:relative;top:0;}.header_img{margin:0 auto;width:70%;height:800px;background:url(../images/banner.jpg) no-repeat;background-size:cover;position:absolute;top:0;left:230px;}.spe_img{height:150px;}.spe_top{height:150px;}/*同样优先级的选择器，相同属性的样式，写在后面的会覆盖前面的，要把这行放到后面*/

不是这个意思啊，是有个选择器根本没效果，开始放不了图
spe_top banner_top 和 spe_top banner_top 这两个分别只有一个有效

header_img spe_img 两个都有效

楼主什么结贴率？？？？
哦。。。。。
被覆盖了。

.spe_top{height:150px;}
.banner_top{background:rgb(0, 229, 238) repeat;height:700px;position:relative;top:0;}
第一个肯定不起作用了，你看看你写的第二个样式就知道了。

赶紧结贴了吧，我都不好意思回复了！

感谢大家，主要是注释的问题，优先级也没怎么搞清楚，问题已解决

热心网友时间：2022-05-13 11:41

一个HTML元素是允许应用多个class样式的，即class="class1 class2 class3.....",
使用理论是没有个数*的追问我就是问为什么一些样式没有效果啊。。。

追答不同的class对应的样式中如果有同名属性会互相覆盖，会按照class声明在页面中被加载的顺序覆盖：最后声明的样式，优先覆盖之前的同名属性样式，遵循就近原则。

热心网友时间：2022-05-13 12:59

后设置的样式会覆盖前面的样式追问这不是覆盖吧，是根本就没效果，就算覆盖右边也该显示出来吧，像img 那块一样