穷举法
<div class="other-nav">
<ul class="other-nav-list clearfix">
<li>
<div class="picture"></div>
<span>话费</span>
</li>
<li>
<div class="picture"></div>
<span>火车票</span>
</li>
<li>
<div class="picture"></div>
<span>加油卡</span>
</li>
<li>
<div class="picture"></div>
<span>白条</span>
</li>
</ul>
<ul class="other-nav-list clearfix">
<li>
<div class="picture"></div>
<span>电影票</span>
</li>
<li>
<div class="picture"></div>
<span>酒店</span>
</li>
<li>
<div class="picture"></div>
<span>理财</span>
</li>
<li>
<div class="picture"></div>
<span>机票</span>
</li>
</ul>
<ul class="other-nav-list clearfix">
<li>
<div class="picture"></div>
<span>礼品卡</span>
</li>
<li>
<div class="picture"></div>
<span>彩票</span>
</li>
<li>
<div class="picture"></div>
<span>游戏</span>
</li>
<li>
<div class="picture"></div>
<span>众筹</span>
</li>
</ul>
</div>
.picture {
width: 48px;
height: 48px;
background-image: url("../images/精灵图-侧边功能.png");
}
.other-nav-list:nth-child(1) li:nth-child(1) .picture {
background-position: 0 0;
}
.other-nav-list:nth-child(1) li:nth-child(2) .picture {
background-position: -48px 0;
}
.other-nav-list:nth-child(1) li:nth-child(3) .picture {
background-position: -96px 0;
}
.other-nav-list:nth-child(1) li:nth-child(4) .picture {
background-position: -144px 0;
}
.other-nav-list:nth-child(2) li:nth-child(1) .picture {
background-position: 0 -48px;
}
.other-nav-list:nth-child(2) li:nth-child(2) .picture {
background-position: -48px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(3) .picture {
background-position: -96px -48px;
}
.other-nav-list:nth-child(2) li:nth-child(4) .picture {
background-position: -144px -48px;
}
.other-nav-list:nth-child(3) li:nth-child(1) .picture {
background-position: 0 -96px;
}
.other-nav-list:nth-child(3) li:nth-child(2) .picture {
background-position: -48px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(3) .picture {
background-position: -96px -96px;
}
.other-nav-list:nth-child(3) li:nth-child(4) .picture {
background-position: -144px -96px;
}