空格在CSS选择器中意味着什么？即.classA.classB和.classA .classB之间有什么区别？

Question

这两个选择器之间有什么区别？

.classA.classB {
  border: 1px solid;
}

.classA .classB {
  border: 1px solid;
}

Answer 1

.classA.classB指的是同时具有A类和B类（class="classA classB"）的元素;而.classA .classB指的是class="classB"的元素来自class="classA"的元素。

编辑：参考规范：Attribute Selectors（参见5.8.3类选择器）

Answer 2

这样的样式更为常见，它将针对任何类型的“classB”类元素，它嵌套在类“classA”的任何类型的元素中。

.classA .classB {
  border: 1px solid; }

例如，它可以用于：

<div class="classA">
  <p class="classB">asdf</p>
</div>

然而，这个目标是任何类型的“classA”类元素，以及类“classB”。这种类型的风格不常见，但在某些情况下仍然有用。

.classA.classB {
  border: 1px solid; }

这适用于此示例：

<p class="classA classB">asdf</p>

但是，它对以下内容没有影响：

<p class="classA">fail</p>
<p class="classB">fail</p>

（注意，当HTML元素有多个类时，它们用空格分隔。）

Answer 3

它被正式称为“后裔组合者”。

在MDN或CSS spec

中进行阅读

Answer 4

.classA.classB表示将同时选择两个类名称的元素，而.classA .classB则将仅选择classB内具有类名称classA的元素。