在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&nbsp;.classB&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid;&nbsp;}例如，它将在以下方面发挥作用：<div&nbsp;class="classA"> &nbsp;&nbsp;<p&nbsp;class="classB">asdf</p></div>然而，这个元素的目标是任何类型的元素，它们都是类“classA”以及类“classB”。这种风格并不常见，但在某些情况下仍然很有用。.classA.classB&nbsp;{ &nbsp;&nbsp;border:&nbsp;1px&nbsp;solid;&nbsp;}这将适用于此示例：<p&nbsp;class="classA&nbsp;classB">asdf</p>然而，它不会对以下方面产生影响：<p&nbsp;class="classA">fail</p><p&nbsp;class="classB">fail</p>(注意，当一个HTML元素有多个类时，它们由空格分隔。)

Answer 3

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