Question

可能重复：
CSS Child vs Descendant selectors

那么，这里的区别是什么？

div a {
  /* Styles here */
}

和

div > a {
  /* Styles here */
}

我真的不明白。

Answer 1

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

Answer 2

用简单的话说：

div a {/*properties*/}

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

<小时/> '＆gt;'符号是'儿童组合'：

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>

此处，红色仅适用于“Link one”和“Link Four”。 'Link Two'＆amp; “链接三”未被选中，因为它们嵌套在“span”元素中。

左右与他们一起玩：http://dabblet.com/gist/3730661

您可以在此处详细了解CSS选择器：http://css-tricks.com/child-and-sibling-selectors/

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

2 个答案: