CSS中定义CLASS时,中间有空格和没空格的区别

202 阅读1分钟
CSS中定义CLASS时,中间有空格和没空格的区别是什么?
.example .pp{
  color: orange;
}
.example.pp2 {
  color: green;
}
如上面的两个定义一个是中间有空格,一个是中间没空格。
第一个class要这样写生效:<p class="example">文字文字<span class="pp">pp这个class生效</span>....</p>
第二个class要这样写生效:<p class="example pp2">pp2这个class生效</p>
  • .example .pp = E F 是后代选择器。

  • .example.pp2 则是在一个元素上,这个元素包括这两个类才会有效果。

.example .pp中间用空格隔开,表示后代选择器,选择的是.example内的.pp