Rumah > hujung hadapan web > html tutorial > html 加载多个class,有的只加载了一个,有的两个都加载了,为何?_html/css_WEB-ITnose

html 加载多个class,有的只加载了一个,有的两个都加载了,为何?_html/css_WEB-ITnose

WBOY
Lepaskan: 2016-06-24 11:37:36
asal
1041 orang telah melayarinya

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

HTML 代码

<div class="spe_header header" style="height:150px;">	<div class="spe_top banner_top">        <div class="header_menu">            <input type="button" id="banner_open" />        </div>        <div class="banner spe_ban">            <div class="banner_x"><input type="button" id="banner_close" /></div>            <div class="banner_main speban_ul">                <ul>                    <li><a href="index.html">HOME</a></li>                    <li><a href="about.html">ABOUT</a></li>                    <li><a href="service.html">SERVICE</a></li>                    <li><a href="gallery.html">GALLERY</a></li>                    <li><a href="blog.html">BLOG</a></li>                    <li><a href=""></a>CONTACT</li>                </ul>            </div>        </div>	</div>	<div class="header_img spe_img"></div></div>
Salin selepas log masuk


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;}/*同样优先级的选择器,相同属性的样式,写在后面的会覆盖前面的,要把这行放到后面*/
Salin selepas log masuk
Salin selepas log masuk

不是这个意思啊,是有个选择器根本没效果,开始放不了图
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;}/*同样优先级的选择器,相同属性的样式,写在后面的会覆盖前面的,要把这行放到后面*/
Salin selepas log masuk
Salin selepas log masuk



不是这个意思啊,是有个选择器根本没效果,开始放不了图
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;}
第一个肯定不起作用 了,你看看你写的第二个样式就知道了。

赶紧结贴了吧,我都不好意思回复了!

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan