css - h1 em 和 h1 > em 的区别

Question

这两个 CSS 语句有什么区别:

h1 em { color:#ddd; }

和

h1 > em { color:#ddd; }

据我所知他们做的是完全一样的事情(虽然根据我在 W3C 上读到的第一种情况 em 被认为是“后代”，而在第二种情况下它被认为是“ child ”，虽然我不知道这实际上有什么不同)。任何人都可以解释这些有何不同以及为什么您会选择使用一种语法而不是另一种语法。我一直只使用第一种方法，但我时不时地在别人的代码中遇到第二种方法。

Answer 1

这个:

h1 em { color:#ddd; }

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

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

这个:

h1 > em { color:#ddd; }

只匹配 em 是 h1 的 child ，而不是孙子、曾孙等。所以:

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