Question

这两个CSS语句之间有什么区别：

h1 em { color:#ddd; }

和

h1 > em { color:#ddd; }

据我所知，他们做的完全相同（尽管根据我在第一种情况下在W3C上读过的内容，em被认为是'后代'，而在第二种情况下，它被认为是'孩子'，虽然我不知道这究竟是多么不同）。任何人都可以解释这些是如何不同的，为什么你会选择使用一种语法而不是另一种语法。我总是只使用第一种方法，但是我不时地在其他人的代码中遇到第二种方式。

Answer 1

这一个：

h1 em { color:#ddd; }

匹配em内的任何h1，无论是儿童，孙子，曾孙等。例如：

<h1><strong><em>This matches</em></strong></h1>

这一个：

h1 > em { color:#ddd; }

只匹配em的孩子h1，而不是孙子，曾孙等。所以：

<h1><strong><em>This doesn't match</em></strong></h1>
<h1><em>But this does</em></h1>

Answer 2

可能不是你给出的最好的例子，但我会用它来运行：

<h1>Stuff here    
  <em>Something
    <p>More stuff</p>
    <p>Something <em>here</em></p>
  </em>
<h1>

在我的例子中，

h1 em将匹配两个em。

h1＆gt; em只匹配作为h1的直接后代的em，而不是第二个内部的em。

Answer 3

h1 em { color:#ddd; }

表示：“em在h1”

h1 > em { color:#ddd; }

表示：“em与父母h1”

Answer 4

后代是在DOM树中任何一点（包含子，孙子类型关系）的包含元素下面出现的任何元素。子元素是直接位于DOM中包含元素下面的元素。

使用它的现实世界含义是，IE6不支持子选择器和兄弟选择器。

Answer 5

只是fyi，使用＆gt;仍存在很多浏览器兼容性问题。在部署之前，我会使用jQuery或至少在所有目标浏览器中进行测试。

Answer 6

这个中的子选择器＆gt; symbol允许您仅选择那些作为h1标记的直接后代的em标记。

示例是解释它的最简单方法：

<h1>H1 Tag <em id="first">child selector<em id="second">not a direct child descendant</em></em> </h1>

在这种情况下，第一个em标签将具有h1＆gt; em样式和应用的h1 em样式，但是第二个em标签或非直接子标签不具有h1＆gt;应用em样式，因为它不是h1的直接子项或后代。

您可以在此处查看doctree规范：http://www.w3.org/TR/CSS2/conform.html#doctree

h1 em和h1之间的差异> EM

6 个答案: