h1 em和h1> em之间的区别

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>