CSS - 瞭解兒童選擇器

Question

任何人都可以解釋這兩者之間的區別嗎？

p a { 
    color: red; 
} 

p > a { 
    color: red; 
} 

謝謝。

Answer 1

'p a'將選擇包含在p元素（後代）中的所有'a'元素，即使它們不是直接子元素。

'p'a'將只會選擇p也是'a'元素的直接子元素。

的jsfiddlehttps://jsfiddle.net/seadonk/a9mfbbax/

HTML：

<p> 
    <a>CHILD A1</a> 
    <span><a>DESCENDENT A2</a></span> 
    <a>CHILD A3</a> 
</p> 

CSS：

/* DESCENDENTS WILL BE RED */ 
p a{ 
    color: white; 
    background-color: red; 
} 

/* CHILDREN WILL BE BLUE */ 
p>a { 
    background-color: blue; 
    color: white 
} 

見W3C Schools CSS Selector Reference。