CSS选择器中的空格意味着什么？即。classa.classb和。classa.classb之间有什么区别？

提问者：小点点

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

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

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

共3个答案

匿名用户

.classa.classb是指同时具有类A和B的元素(class=“classA classb”)；而.classa.classb是指具有class=“classb”的元素从具有class=“classa”的元素派生而来的具有class=“classb”的元素。

编辑:用于参考的规范:属性选择器（参见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的元素。