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

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

.classA.classB { border: 1px solid; } .classA .classB { border: 1px solid; } 

Answer 1

.classA.classB引用同时具有类A和B（ class="classA classB" ）的class="classA classB" ; 而.classA .classB指的是class="classB"的元素， .classA .classB是class="classB"的元素。

编辑：规范以供参考： 属性选择器 （参见5.8.3节类选择器）

Answer 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元素有多个类时，它们被空格隔开。）