樓上并沒有說出問題的實質，盡管“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勝出。

題主，你理解了我的意思了嗎？

我也是初學者，如果我的看法有不當之處，希望有其他同學能指出！