个回答

• wengyaqiang

  2015-06-15 16:43:43

  已采纳

  楼上并没有说出问题的实质，尽管“cat类名下所有的i，而后者则是cat内的li内的i,这两者是有明显区别的”这句话没错，但是在这个实例中， .cat i和 .cat li i是指向相同的元素。 我觉得题主提出了一个很好的问题，所以在我一番探索之后，得出了答案感觉很有成就感！

  问题的关键点在于样式的优先级！

  以.cat-2 i样式为例，我们看到样式中关于 li 标签属性的设置，有.cat i 和 .cat-2 i，如果我们同时在其中设置背景图片，如

  .cat i {

      background:url(image/539a950e00015ba500710200.jpg);     

     /*没有设置偏移，则默认position是0 0，显示第一张图片*/

      display: inline;

      float: left;

      margin: 3px 10px 0 0;

      height: 24px;

      width: 30px

  }

  .cat-2 i{background:url(image/539a950e00015ba500710200.jpg);background-position:0 -24px;}

  /*设置了偏移，显示第二张图片*/

  
  

  在.cat i中设置了背景图片，即有默认的background-position:0 0; 而在.cat-2 i中，我们又设置了backgroud-position:0 -24px;  我们知道，当同时为一个元素的一个属性设置不同样式时，最终效果将依据样式的优先级来显示。

  这个时候，我们容易理解，因为 .cat-2 i比.cat i 更具体（.cat-2比.cat更靠近i），优先级更高，所以.cat-2 i的背景图片是会显示出第二张图片。

  这个时候，我们如题主所做的，把 .cat i改为.cat li i，我们会发现，.cat-2 i的背景图片显示为第一张图片，因为此时.cat li i 比.cat-2 i的优先级更高，所以以.cat li i的样式来显示。

  至于为什么.cat i比.cat-2 i的优先级低，而.cat li i比.cat-2 i的优先级更高，需要去了解下CSS优先级的算法。

  .cat i比.cat-2 i都同时有一个标签选择器i ，分别有一个类选择器.cat，cat-2 ，这个时候按CSS优先级算法的值它们是相同的，但是.cat-2比.cat 更靠近i，所以.cat-2 i胜出为最终样式，而前者又多了li之后，.cat li i的优先级值就比.cat-2 i更高了，所以.cat li i胜出。
  

  题主，你理解了我的意思了吗？

  我也是初学者，如果我的看法有不当之处，希望有其他同学能指出！

  2

• Evan笔记

  2015-06-10 11:52:50

  .cat i和.cat li i的不同在于前者的范围大，前者是cat类名下所有的i，而后者则是cat内的li内的i,这两者是有明显区别的

  0