爲什麼在標籤上更改css類的順序會使元素消失？

案例1：

<i class="csx-icons-select-hollow-active follow-handler"></i>

案例2：

<i class="follow-handler csx-icons-select-hollow-active"></i>

這裏是我的CSS：

.csx-icons-select-hollow-active { 
    background-position: 0 -300px; 
    display: inline-block !important; 
    height: 25px; 
    margin: 0; 
    padding: 0; 
    vertical-align: middle; 
    width: 33px; 

} 
[class^="csx-icons-"] { 
    background: url("../img/sprite.png") no-repeat scroll 100px 100px rgba(0, 0, 0, 0); 
}

後續處理不會對我的CSS文件存在，只有在我的html裏面<i class="">。這與我的css文件上的.follow-handler{}是一樣的。

這裏是萬一1個究竟：

http://imgur.com/4Tkzycd,UlM6Ko5#1

這裏是在情況2發生的事情：

http://imgur.com/4Tkzycd,UlM6Ko5#0

正如你所看到的，交換後續的順序處理程序和csx-icons-select-hollow-active足以使圖標消失。

爲什麼這是一個問題？

當我使用jQuery $('.follow-handler').toggleClass('.csx-icons-select-hollow-active')我最終會跟隨處理程序之前csx-icons *，這將使我的圖標消失。

有沒有人知道爲什麼會發生這種情況？爲什麼一個不存在的階級的秩序足以使一些元素消失？

來源

2014-01-23 magroski

這是「屬性始於」選擇，而不是「類開始」選擇 – adeneo

你的第二個選擇的'^ ='部分是問題。 '^ ='與'class'字符串的*開頭*匹配。 –

.csx-圖標選中空活性

手段「是類的一個成員csx-icons-select-hollow-active但

[類^ =」 CSX-icons-」 ]

意味着「類屬性的字符串值以開頭

如果交換類順序，則類屬性不再以這些字符開始。

來源

2014-01-23 15:12:34 Quentin

我覺得我還不夠清楚，我指的是改變html標籤中的類順序，而不是在我的css文件中。 – magroski

@magroski - 是的，我知道。再看看我的答案。「class **屬性**以'csx-icons-'」開頭。屬性是HTML的一部分，而不是CSS。 – Quentin

哦，現在我明白了！我完全忘了^意思是「開始 - 與」。感謝您的快速回答，祝您有個愉快的一天：D – magroski

第一個班的「開始於」「csx-icons-」，而第二個班的班不開始於「」csx-icons-「。

瞭解這個「打頭」的official w3 page

來源

2014-01-23 15:14:30 agastalver

爲什麼在標籤上更改css類的順序會使元素消失？

回答

相關問題