＆gt;有什么区别？和css选择器中的空格

Question

我见过两个例子，

  

.someclass＆gt; .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>

Answer 2

.someclass > .inner{...}   - 仅适用于直接孩子为“.someclass”的“.inner”。

.someclass .inner{...} - 适用于“.someclass”中的任何“.inner”，即使它们之间存在元素。