楼上并没有说出问题的实质，尽管“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胜出。

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

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