css – h1 em和h1> em之间的差异

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

h1 em { color:#ddd; }

和

h1 > em { color:#ddd; }

据我所知,他们做的完全相同(尽管根据我在W3C上读到的第一种情况,em被认为是’后代’,而在第二种情况下它被认为是’孩子’,尽管我有不知道这实际上是多么不同).任何人都可以解释这些是如何不同的,为什么你会选择使用一种语法而不是另一种语法.我总是只使用第一种方法,但我不时地在其他人的代码中遇到第二种风格.

这个：

h1 em { color:#ddd; }

匹配h1内的任何em,无论是孩子,孙子,曾孙等.例如：

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

这个：

h1 > em { color:#ddd; }

只匹配一个h1的孩子,而不是孙子,曾孙等等.所以：

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