声明css样式时，.classA.classB是啥意思（两个类名中间有一个点，没有空格）[重复]

Posted 2023-03-06

【中文标题】声明css样式时，.classA.classB是啥意思（两个类名中间有一个点，没有空格）[重复]

【英文标题】：when declaring css styles, what is the meaning of .classA.classB (two class names with a dot in the middle and no space) [duplicate]声明css样式时，.classA.classB是什么意思（两个类名中间有一个点，没有空格）[重复]

【发布时间】：2014-12-03 11:27:19

【问题描述】：

我知道当中间有空格时，它会在左边的类中寻找右边的类。

.classA .classB 
    ...

但是，没有空间的时候它会寻找什么？

.classA.classB 
    ...

【问题讨论】：

一个包含两个类的元素。在这里阅读：***.com/questions/5116288/…

@88MPG - 您应该将其发布为答案...

@LcSalazar 我确定当我发布一个答案时会弹出 50 个答案。

CSS Selector that applies to elements with two classes、http://***.com/questions/3918742/css-styling-when-element-has-two-classes、http://***.com/questions/5796654/css-rule-to-apply-only-if-element-has-both-classes 的可能重复项...

@88MPG - 如果您在发表评论时已经发布了它，那么您将被点赞，而不是弹出答案...

【参考方案1】：

第一个例子（空格分隔的类）是父子关系。 .classB 位于 .classA 中。

<div class="classA">
    <div class="classB"></div>
</div>

第二个是针对具有多个类的一个元素，如下所示：

<div class="classA classB"></div>

非常不同的情况，但都非常有用！

进一步阅读：css select an element with 2 classhttp://css-tricks.com/multiple-class-id-selectors/

【参考方案2】：

在第一个示例 .classA .classB 中，您正在选择类为 classB 的元素，这些元素是具有 classA 的元素的后代。

在第二个示例.classA.classB 中，您正在选择具有 类classA 和classB 的元素。

【参考方案3】：

当你需要一个元素时使用它，这两个类都有。

<div class="classA classB"></div>

会匹配

.classA.classB

另请参阅：http://css-tricks.com/multiple-class-id-selectors/