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

更新: 9/4/2025字数: 0 字时长: 0 分钟

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

javascript

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

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

第一个 class 要这样写生效：

javascript

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

第二个 class 要这样写生效：

javascript

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

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

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

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