h1 em与h1 > em之间的区别

Question

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

h1 em { color:#ddd; }

和

h1 > em { color:#ddd; }

据我所知，它们做的是完全相同的事情(尽管根据我在W3C读到的第一种情况，em被认为是“后代”，而在第二种情况下，它被认为是“孩子”，尽管我不知道这实际上有什么不同)。有人能解释一下它们有什么不同吗?为什么你会选择使用一种语法而不是另一种语法？我一直只使用第一种方法，但我经常在别人的代码中遇到第二种风格。

Answer 1

这一条：

h1 em { color:#ddd; }

匹配h1中的任何em，无论它是孩子、孙子、曾孙等等。例如：

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

这一条：

h1 > em { color:#ddd; }

仅匹配作为h1的子级的em，而不匹配孙子、曾孙等。因此：

<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>em将只匹配作为h1的直系后代的em，而不是第二个内部em。

Answer 3

h1 em { color:#ddd; }

意思是：“h1中的em”

h1 > em { color:#ddd; }

意思是：“带父h1的em”