CSS - 类选择器: 中间有空格和没有空格的情景

类选择器: 中间有空格和没有空格的情景

CSS中定义CLASS时，中间有空格和没空格的区别是什么？

.example .space{  // 注意，中间有空格
  color: orange;
}
.example.noSpace {  // 中间没有空格
  color: green;
}

如上面的两个定义一个是中间有空格，一个是中间没空格。

第一个class要这样写生效：

<p class="example">文字文字
    <span class="space">space这个class生效</span>
</p>

第二个class要这样写生效：

<p class="example noSpace ">
    noSpace 这个class生效
</p>123

.example .space 中间用空格隔开，表示后代选择器

.example.noSpace 则是在一个元素上，这个元素包括这两个类才会有效果