為什么我不能用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>
<!--添加列表的結(jié)構(gòu)-->
<div class = "spr">
<ul class="list-1">
? ? <li class="cat_1"><i></i><h3>服裝內(nèi)衣</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>手機數(shù)碼</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標簽中更改背景圖位置就沒問題
2018-11-07
.cat_1{background-position: 0 0;}
改成
.cat_1 i{background-position: 0 0;}
圖是放在i下面的不是cat_1
2018-08-24
鬧了半天，我的選擇器后面還要再加一個i標簽，cat-number本身是沒有background的