CSS - 理解子选择器

Question

谁能解释这两者之间的区别？

p a {
  color: red;
}

p > a {
  color: red;
}

感谢。

Answer 1

'p a'将选择p元素（后代）中包含的所有'a'元素，即使它们不是直接的子元素。

'p＆gt; a'只会选择p的直接子节点，它们也是'a'元素。

JSFIDDLE https://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。