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。