index.html

在 local-nav-icon 加不同的名

  <ul class="local-nav">
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon-icon1"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon-icon2"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon-icon3"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon-icon4"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
    <li>
      <a href="#" title="景点·玩乐">
        <span class="local-nav-icon-icon5"></span>
        <span>景点·玩乐</span>
      </a>
    </li>
  </ul>

index.css

^= 以什么开头

.local-nav li a [class^=local-nav-icon] {
  width: 32px;
  height: 32px;
  background: url(../images/localnav_bg.png) no-repeat 0 0;
  background-size: 32px auto;
  margin-top: 8px;
}


.local-nav li a .local-nav-icon-icon2 {
  background-position: 0 -32px;
}

.local-nav li a .local-nav-icon-icon3 {
  background-position: 0 -64px;
}

.local-nav li a .local-nav-icon-icon4 {
  background-position: 0 -96px;
}

.local-nav li a .local-nav-icon-icon5 {
  background-position: 0 -128px;
}