.class> .class和.class .class之间的区别

Question

我只是想知道以下两者之间的区别:

.class .class{
font-size:14px;
}

VS:

.class > .class{
font-size:14px;
}

是一回事吗？

Answer 1

不,它们不一样 - 第一个例子是后代选择器,第二个是直接子选择器.

.class .class将使用.class从具有该类的任何元素派生的类来定位所有元素.class,例如

<div class="class">
 <div class="other">
    <div class="class"> This is targeted. </div>
 </div> 
</div>

jsFiddle example

.class > .class将仅针对具有该类的元素的直接子元素.class,例如

<div class="class">
   <div class="other">
      <div class="class">This isn't targeted.</div>
   </div> 
   <div class="class">
      <div class="class">This is targeted, as it is a direct child.</div>
   </div>    
</div>

jsFiddle example.