css - css选择器中的>和空格有什么区别

Question

我见过两个例子，

.someclass > .inner{...}

和

.someclass .inner{...}

以同样的方式工作。它们之间有什么我没有看到的区别吗？

Answer 1

第一个仅适用于直系子女。第二个，对任何后代。

因此给定这个 CSS:

.someclass > .inner { color: red }
.someclass .inner { font-weight: bold }

以下内容适用:

<div class="someclass">
  <div class="inner">
     Bold and red
  </div>

  <div> 
    <div class="inner">
      Just bold.
    </div>
  </div>
</div>

.someclass>.inner {
  color: red
}

.someclass .inner {
  font-weight: bold
}

<div class="someclass">
  <div class="inner">
    Bold and red
  </div>

  <div>
    <div class="inner">
      Just bold.
    </div>
  </div>
</div>