为什么我不能用class选择器更改background-position属性呢
<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标签中更改背景图位置就没问题
