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

这是我的HTML代码

案例1：

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

follow handler在我的css文件中不存在，只存在于我的html中

。这与在我的css文件上有

。follow handler{}

是一样的

下面是案例1中发生的情况：

下面是案例2中发生的情况：

如您所见，交换follow handler和csx图标select hollow active的顺序足以使图标消失

为什么这是个问题？

当我使用jQuery

$（'.follow handler'）.toggleClass（'.csx icons select holl active'）

时，我将在csx icons*之前使用follow handler，这将使我的图标消失

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

.csx图标选择空心激活

表示“是类别的成员，csx图标选择空心活动，但

[class^=“csx图标-”]

表示“类属性的字符串值以

csx图标开始-”

如果交换类顺序，则类属性不再以这些字符开头。

第一个类“以”“csx图标-”开头，而第二个类“以”“csx图标-”开头

---

了解此“从开始”选项，它是“属性从开始”选择器，而不是“类从开始”“selector第二个选择器的

^=

部分就是问题所在

^=

与

类

字符串的开头匹配。我想我不够清楚，我指的是更改html标记中的类顺序，而不是css文件中的类顺序。@magroski-是的，我知道。再看看我的答案。“类属性以

csx图标-

开头。”。属性是HTML的一部分，不是CSS。哦，现在我明白了！我完全忘了“^”的意思是“从开始”。谢谢你的快速回答，祝你度过愉快的一天：D

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

.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);
}