CSS 选择器中的空格是啥意思？即 .classA.classB 和 .classA .classB 有啥区别？

Posted 2023-03-05

【中文标题】CSS 选择器中的空格是啥意思？即 .classA.classB 和 .classA .classB 有啥区别？

【英文标题】：What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?CSS 选择器中的空格是什么意思？即 .classA.classB 和 .classA .classB 有什么区别？

【发布时间】：2010-11-10 17:05:32

【问题描述】：

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

.classA.classB 
  border: 1px solid;


.classA .classB 
  border: 1px solid;

【参考方案1】：

.classA.classB 指的是同时具有 A 类和 B 类的元素 (class="classA classB")；而.classA .classB 指的是一个带有class="classB" 的元素，它是一个带有class="classA" 的元素的后代。

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

【参考方案2】：

这样的样式更为常见，并且可以针对嵌套在“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 元素有多个类时，它们之间用空格分隔。）

【讨论】：

显示失败的案例很有帮助。

【参考方案3】：

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

【讨论】：

这是对的，但这个问题在十年前就已经被正确回答了；它并不需要一个新的答案。