在 CSS 中 .a.b 与 .a .b 不同吗？答案

【问题标题】：In CSS is .a.b different than .a .b?在 CSS 中 .a.b 与 .a .b 不同吗？
【发布时间】：2013-09-17 19:27:49
【问题描述】：

在我的 css 文件中 .a.b 与 .a .b 不同？

这是一个简单的问题，但它总是让我烦恼。我试过了，但我想我会把它贴在这里以防万一它作为参考有用。

【问题讨论】：

标签： css

【解决方案1】：

在我的 css 文件中 .a.b 与 .a .b 不同吗？

是的

.a.b 是一个或多个具有两个类的元素。

<div class="a b">(target)</div>

.a .b 是一个或多个具有类 b 的元素 any 具有类 a 的父元素

<div class="a"><div class="b">(target)</div></div>

甚至

<div class="a">
  <div>
    <div>
      <div class="b">(target)</div>
   </div>
   <div class="b">(target)</div>
   <div class="b">(target)
     <div class="b">(target)</div></div>
  </div>
</div>

它们非常不同。

我在示例.a .b 中选择了从右到左的方向，因为所有.b 元素都是CCS 的目标。

此外，您甚至可以在我的第一个示例中使用div.a.b，在第二个示例中使用div.a div.b。

https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

【讨论】：

即。类在一起意味着在同一个元素上；用空格分隔的类是后代元素，从左到右。
这真的很有帮助，我搜索了整个developer.mozilla.org并没有找到.a.b的用法，你从哪里弄出来的？
@GlennPallad stackoverflow.com/questions/25105736/… 适合初学者。
.a.b 与 .b.a 有什么不同吗？我测试了，我没有发现任何区别。
@CloudWalker 完全一样。您正在声明具有a 类和b 类的任何元素。在这方面，订单无关紧要。有点像说任何人有 10 个手指和 10 个脚趾，这与说 10 个脚趾和 10 个手指是一样的。

【解决方案2】：

.a.b 表示“同时具有a 类和b 类的元素”

例子：
```
<div class="a b">(element)</div>
```

.a .b 表示“一个元素的类为 b，其父、祖父或祖父等具有类 a”

例子：

<div class="a">
  <div class="b">(element)</div>
</div>

<div class="a">
  <div class="c">
    <div class="b">(element)</div>
  </div>
</div>

【讨论】：

【解决方案3】：

是的！它们是不同的！

.a.b 是具有a 和b 两个类的元素

<span class="a b"></span>

.a .b 是一个元素，其中a 是类b 的父级或更高级别

<span class="a">
    <span class="b">
    </span>
</span>

【讨论】：