为什么更改标签上的css类顺序使元素消失？

Question

这是我的HTML代码.

情况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文件中不存在follow-handler,只在我的html里面<i class="">.它与.follow-handler{}我的css文件相同.

以下是案例1中发生的情况:

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

以下是案例2中发生的情况:

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

正如您所看到的,交换follow-handler和csx-icons-select-hollow-active的顺序足以使图标消失.

为什么这是个问题？

当我使用jQuery时,$('.follow-handler').toggleClass('.csx-icons-select-hollow-active')我最终将使用跟随处理程序BEFORE csx-icons*这将使我的图标消失.

有谁知道为什么会这样？为什么不存在的类的顺序足以使某些元素消失？

Answer 1

.csx-图标,选择中空主动

意思是"是班上的成员csx-icons-select-hollow-active但是

[类^ = "CSX-icons-"]

表示"类属性的字符串值以.开头csx-icons-"

如果交换类顺序,则class属性不再以这些字符开头.