为什么我不能用class选择器更改background-position属性呢
慕圣9983511
2018-08-24 21:54
<html>
<head>
<!--准备一个空白的HTML页面，同时完成css reset样式 -->
<meta charset="utf-8">
<style>
*{margin:0;
padding:0;
}
.spr{
border:1px solid #bbb;
background-color:#f8f8f8;
width: 150px;
position: relative;
overflow: hidden;
}
ul li{
height: 31px;
border-bottom:1px solid #dedede;
overflow:hidden;
padding:5px;
}
ul li h3{
font-weight: 400;
line-height:31px;
}
.cat_1{background-position: 0 0;}
.cat_2{background-position: 0 -24px;}
.cat_3{background-position: 0 -48px;}
.cat_3{background-position: 0 -72px;}
li i{
display: inline;
background: url(image/sidebar.png);
height: 24px;
width: 30px;
float: left;
line-height: 31px;
background-position: 0 -24px;
}
.list-1{
display: block;
position: relative;
}
ul{list-style:none
};
</style>
<!--补充完整的样式-->
</head>
<body>
<!--添加列表的结构-->
<div class = "spr">
<ul class="list-1">
<li class="cat_1"><i></i><h3>服装内衣</h3></li>
<li class="cat_2"><i></i><h3>鞋包配饰</h3></li>
<li class="cat_3"><i></i><h3>运动户外</h3></li>
<li class="cat_4"><i></i><h3>珠宝手表</h3></li>
<li class="cat_5"><i></i><h3>手机数码</h3></li>
<li class="cat_6"><i></i><h3>家电办公</h3></li>
<li class="cat_7"><i></i><h3>护肤彩妆</h3></li>
<li class="cat_8"><i></i><h3>母婴用品</h3></li>
</ul>
</div>
</body>
</html>
这个我的类选择器就是无法改变背景图的位置，如果直接在i标签中更改背景图位置就没问题
2回答
-
- 慕雪5316597
- 2018-11-07 15:40:08
.cat_1{background-position: 0 0;}
改成
.cat_1 i{background-position: 0 0;}
图是放在i下面的不是cat_1
-
- 慕圣9983511
- 2018-08-24 22:04:28
闹了半天，我的选择器后面还要再加一个i标签，cat-number本身是没有background的
CSS Sprite雪碧图应用
47101 学习 · 228 问题
相似问题