空格在 CSS 选择器中意味着什么? 例如，. classA.classB 和. classA.classB 之间的区别是什么？

小开

.classA.classB是指同时具有 A 类和 B 类的元素(class="classA classB") ; 而 .classA .classB是指具有 class="classB"的元素从具有 class="classA"的元素进化而来的元素。

编辑: 参考规范: 属性选择器(见5.8.3节类选择器)

小开

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

.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 元素有多个类时，它们由空格分隔。)

小开

.classA.classB意味着将选择具有两个类名的元素，而 .classA .classB意味着只选择 classA中具有类名 classB的元素。