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

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

来源：3-4 编程练习

myrtis

2015-09-14 16:32

<!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>

写回答关注

1回答

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;}    //该处选择器指向更准确，值更高

1 2

myrtis

恍然大悟，真的很谢谢！

2015-09-14 20:42:57

共 1 条回复 >

CSS Sprite雪碧图应用

必学的大型网站实用技术，让你快速掌握CSS Sprite雪碧图技术

47101 学习 · 228 问题

查看课程

相似问题

雪碧图图片位置乱了

回答 1

雪碧图只能原大小使用吗？

回答 1

使用雪碧图有什么讲究

回答 2

谁能告诉我为什么引用雪碧图的位置不同，效果也不同

回答 3

为什么雪碧图没有显示出来呢？？

回答 2

打开慕课网App查看更多内容