css - 这两种风格规则有什么区别？

Question

可能重复：
CSS Child vs Descendant 选择器

那么，这里有什么不同呢？

div a {
  /* Styles here */
}

和

div > a {
  /* Styles here */
}

我真的不明白。

Answer 1

space是后代组合器，>而是子组合器。Child表示直接后代，descendant表示父元素的子树中某处的节点，无论多深。

Answer 2

用简单的话来说：

div a {/*properties*/} 

这将选择给定样式并将其应用于“div”中的所有“a”元素。

---

'>' 符号是 'Child Combinator'：

div > a {/*properties*/}

这将只选择 div 内的直接子“a”标签。

例如：
CSS：

div > a {color: red}

html:

<div>
    <a href="#">Link One</a>
    <span>
        <a href="#">Link Two</a>
        <a href="#">Link Three</a>
    </span>
    <a href="#">Link Four</a>
</div>

此处，红色仅适用于“链接一”和“链接四”。“链接二”和“链接三”未被选中，因为它们嵌套在“跨度”元素中。

和他们一起玩：http: //dabblet.com/gist/3730661

您可以在此处阅读有关 CSS 选择器的更多信息：http: //css-tricks.com/child-and-sibling-selectors/