<ul>
  <li></li>
</ul><!-- 仅有一个li -->
<ul>
  <li></li>
  <li></li>
</ul><!-- 有两个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有三个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有四个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有五个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有六个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有七个li -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul><!-- 有八个li -->

ul li:nth-last-child(n + 4):nth-last-child(-n+6):first-child,ul li:nth-last-child(n + 4):nth-last-child(-n+6):first-child ~ li{
  background-position: 0 0;
}
//Base style
html,body{
  margin: 0;
  padding: 0;
}
ul {
  margin:10px 0;
  padding: 0;
  list-style: none outside none;
  text-align: center;
  
  li {
    display: inline-block;
    width: 105px;
    height: 105px;
    background: url(https://www.w3cplus.com/sites/default/files/blogs/2015/1507/fig2_squid.png) no-repeat -119px 0;
    background-size: 348px 105px;
    margin: 5px;
  }
}