在CSS选择器中，空格意味着什么？即.class A.class B和.class A.class

Question

在CSS选择器中，空格意味着什么？即.class A.class B和.class A.class 这两个选择器有什么区别？.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".

编辑：规范供参考：属性选择器(见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

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