>和空間有什麼區別？

Question

什麼是這兩種風格之間的差異：

element1 > element2 { 
    ... 
} 

和

element1 element2 { 
    ... 
} 

Answer 1

element1 > element2

選擇所有<element2>元素，其中該親本是一個<element1>元件（參見child combinator selector獲得更多信息）而選擇element1 element2內部<element1>元素（參見descendant selector獲得更多信息）所有<element2>元素。

例子：
如果你有以下DOM標記（見本JSFiddle）：

a 
    c 
    b 
    c 
    d 
    c 

你使用a c {bg -> red}（僞代碼）所有的C元素會變成紅色，但如果你還使用a > c {bg -> blue}第一個c元素將變爲藍色，而另一個將變爲紅色。這是因爲a元素是第一個c元素的直接父元素。

Answer 2

>是表示一個直接的孩子，而一個空間（或>>）是descendant combinator的child combinator，這意味着其他元素可以在第一個裏面的任何地方。

如果您有以下DOM樹

a 
    b 
    c 
    d 

然後a > c將沒有匹配，而a c將c元素相匹配。

Answer 3

element1 element2 

選擇所有elements內部elements

element1 > element2 

選擇所有elements其中親本是element

Answer 4

element1 element2選擇所有ELE內部element1

例發言：

<style> 
 
.element1 .element2{ 
 
    color: #2196F3; 
 
    background-color: #FFEB3B; 
 
} 
 
</style> 
 

 
<div class="element1"> 
 
    <p class="element2"> 
 
     As you can see that this paragraph with class `element2` is inside div with class `element1` and so it's catched by css written above. 
 
    </p> 
 
</div>

鑑於

element1 > element2選擇每element2其中該親本是一個element1

<style> 
 
.element1 > .element2{ 
 
    color: #2196F3; 
 
    background-color: #FFEB3B; 
 
} 
 
</style> 
 

 
<div class="element1"> 
 
    <p class="element2"> 
 
     This paragraph is catched by css above because this paragraph with class `element2` is immediate child of div with class `element1`. 
 
    </p> 
 
</div> 
 

 
<!--no effect--> 
 
<div class="element1"> 
 
    <div class="middleelement"> 
 
     <p class="element2"> 
 
      This paragraph is <strong>NOT</strong> catched by css written above because it's not immediate child of div with class `element1` because class `middleelement` comes in between. To refer to this paragraph, you have to write css as `.element1 &gt; .middleelement &gt; .element2` 
 
     </p> 
 
    </div> 
 
</div>