问答详情
源自：3-4 编程练习

雪碧图位置没有发生偏移，不明为何。（未使用老师给的模板，只添加了自己认为必要的元素）

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>sidebar</title>
  <style type="text/css">
    *{margin: 0;padding: 0;font: normal 14px "微软雅黑";}
    .cat{
      margin: 30px 20px;
      padding: 5px 10px;
      width: 140px;
      text-align: center;
      position: relative;
      list-style:none;
      border: 1px solid #D1D1D1;
    }
    .cat li{
      height: 30px;
      line-height: 30px;
      border-bottom:1px solid #D1D1D1;
      padding: 10px 10px 0px 10px;
    }
    .cat8{
      border-bottom: none;
    }
    .cat li i{
      width:24px;
      height:24px;
      background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
      float:left;
      display: inline;
    }
    .cat1 i{background-position: 0 0px;}
    .cat2 i{background-position: 0 -24px;}
    .cat3 i{background-position: 0 -48px;}
    .cat4 i{background-position: 0 -72px;}
    .cat5 i{background-position: 0 -96px;}
    .cat6 i{background-position: 0 -120px;}
    .cat7 i{background-position: 0 -144px;}
    .cat8 i{background-position: 0 -168px;}
  </style>
</head>
<body>
  <div>
      <ul class="cat">
        <li class="cat1"><i></i>服装内衣</li>
        <li class="cat2"><i></i>鞋包配饰</li>
        <li class="cat3"><i></i>运动户外</li>
        <li class="cat4"><i></i>珠宝手表</li>
        <li class="cat5"><i></i>手机数码</li>
        <li class="cat6"><i></i>家电办公</li>
        <li class="cat7"><i></i>护肤彩妆</li>
        <li class="cat8"><i></i>母婴用品</li>
      </ul>
  </div>
</body>
</html>


提问者：myrtis 2015-09-14 16:32

个回答

  • pardon110
    2015-09-14 17:33:39
    已采纳

    与选择器的优先级有关。一般而言，选择器指向的越准确，它的优先级就越高。分析下面的优先级代码：

    .cat1 i{background-position: 0 0px;}　 //优先级总值　１０+１
    .cat li i{      width:24px;
      height:24px;
      background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
      float:left;
      display: inline;
    }                                // 优先级总值　10+１+１

    而浏览器渲染模板的逻辑，选择器指向对象相同的情况下，只会执行优先级值高的，所以

    你可以这样写就行了　将

    .cat li i{      width:24px;
      height:24px;
      background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
      float:left;
      display: inline;
    }

    改为

    i{      width:24px;
      height:24px;
      background: url(http://img.mukewang.com/539a950e00015ba500710200.jpg);
      float:left;
      display: inline;
    }

    或者这样　将所有形如这样的

     .cat1 i{background-position: 0 0px;}

    改为这样就可以了

     li.cat1 i{background-position: 0 0px;}    //该处选择器指向更准确，值更高


    2