选择器“.class.class”和“.class.class”有什么区别？答案

【问题标题】：What is the difference between the selectors ".class.class" and ".class .class"?选择器“.class.class”和“.class.class”有什么区别？
【发布时间】：2013-06-27 19:12:44
【问题描述】：

.class.class 和 .class .class 有什么区别？

【问题讨论】：

第一个选择具有两个类的元素。后者选择一个具有类class 的元素，该元素的父类具有class
为了让一切更容易理解，我认为区分class1和class2中的类会更好

标签： css css-selectors

【解决方案1】：

.class .class 匹配 .class 类中的任何元素，这些元素是具有 .class 类的另一个元素的后代。

.class.class 匹配具有这两个类的任何元素。

【讨论】：

对于后者，顺序重要吗？
@ClarusDignus ，如果是 .class.class，顺序无关紧要。这里是fiddle。
@NoopurDabhi 明白了。谢谢你的例子。

【解决方案2】：

.class1.class2

在其class 属性中同时设置了class1 和class2 的元素（例如：class="class1 class2"）

.class1 .class2

具有class2 的元素是具有class1 类的元素的后代

【讨论】：

这是最容易理解的答案，IMO。
然而，我什至无法阅读它而不会感到困惑，哈哈，我是一个 webdev
@nbro 不，这个比较容易理解stackoverflow.com/a/17391614/8618055

【解决方案3】：

.name1.name2

表示将两个类放在一起的div 或element，例如：
```
<div class="name1 name2">...</div>
```

.name1 .name2

表示div 或element，它具有name1 类及其任何具有name2 类的子节点
```
<div class="name1">
    <div class="name2">
        ...
    </div>
</div>
```

【讨论】：

【解决方案4】：

.class.class 也可用于避免使用 !important，以防更高的特异性选择器阻止您的规则被应用。

在这种情况下，HTML 元素中没有两个类。您只需在样式（选择器）中重复您想要增加的特异性的类，例如

(HTML) <div class="something">...</div>

(CSS) .something.something {}

【讨论】：