空格在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".

编辑:参考规格:属性选择器(参见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元素有多个类时,它们用空格分隔.)