css - 在 CSS 中 .ab 与 .a .b 不同吗？

Question

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

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

Answer 1

在我的 css 文件中，.ab 与 .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.ba意思是“一个同时具有类和类的元素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 .ba是类的父级或更高级别的元素b

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