选择器之前的CSS空间

Question

我很难理解为什么我的HTML元素没有选择这个简单的CSS类选择器。

.label-hi :before {
    color:green;
    content: "Hi ! ";
}

Answer 1

简单选择器之间的空格是CSS中的descendant combinator。如果它是两个用空格分隔的普通选择器，则意味着'元素匹配第二个选择器，放置在与第一个选择器匹配的元素内的任何位置'。由于第二个选择器是一个伪元素，因此整个选择器等同于.label-hi *:before，可能会将某些东西插入到任何元素里面的元素{{1} }。

Answer 2

所以我意识到，对于这个特定的选择器，我不能在类名和:之间留下任何空格。这意味着删除空类我的CSS类被选中：

.label-hi:before {
    color:green;
    content: "Hi ! ";
}

在常规课程中，空间没有任何区别。

此处示例：http://jsfiddle.net/GtTcn/