CSS - 了解子选择器[重复]答案

【问题标题】：CSS - Understanding child selectors [duplicate]CSS - 了解子选择器[重复]
【发布时间】：2015-07-18 00:57:38
【问题描述】：

谁能解释一下这两者的区别？

p a {
  color: red;
}

p > a {
  color: red;
}

谢谢。

【问题讨论】：

"Anyone" 在这种情况下是 official CSS specification，它做得最好。

标签： css css-selectors

【解决方案1】：

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

'p>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。

【讨论】：

很酷，谢谢。为什么这被否决了。
不确定，但我已经更新了我的答案，包括一个可以玩弄的小提琴，希望对您有所帮助。