.selector1 .selector2和.selector1> .selector2有什麼不同？

Question

.selector1 .selector2和.selector1 > .selector2有何不同？不要再指出.selector2是.selector1的子碼

有什麼不同？

Answer 1

>表示第二個元素必須是直接子元素。使用簡單的空間，第二個元素可以在第一個元素的「下方」的任何位置找到。例如：

<ul id="root"> 
    <li id="a"> 
     <ul> 
      <li id="x"></li> 
      <li id="y"></li> 
     </ul> 
    <li id="b"> 
     Something 
    </li> 
</ul> 

選擇器'#root > li'只匹配a和b，但'#root li'比賽x和y爲好。

Answer 2

第一種形式與任何後代相匹配，無論它有多少級別，而第二種形式只匹配直接子級。

以元素的層次結構：

<div id="Bob" class="selector1"> 
    <div id="Mary" class="selector2"> 
     <div id="Alice" class="selector2"> 
     </div> 
    </div> 
</div> 

的選擇.selector1 .selector2將同時匹配瑪麗和愛麗絲。另一方面，.selector1 > .selector2只會匹配Mary，因爲Alice不是selector1元素的直接子元素。