在CSS中是.a.b不同于.a .b

Question

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

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

Answer 1

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

是的

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

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

.a .b是具有类 B 的一个或多个元素，具有类 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/

Answer 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>
  

Answer 3

是的！他们是不同的！

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

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

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

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