h1 em和h1 > em的区别

Question

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

display: none;

visibility: hidden;

h1 em { color:#ddd; }

and

h1 > em { color:#ddd; }

据我所知，它们做的事情完全相同（尽管根据我在W3C上阅读的内容，在第一种情况下，em被认为是“后代”，而在第二种情况下，它被认为是“子元素”，尽管我不知道这实际上有什么不同）。有人能解释一下它们的区别以及为什么要选择使用其中一种语法吗？我一直只使用第一种方法，但偶尔会在其他人的代码中遇到第二种风格。

- Ken

Answer 1

这是一个例子：

h1 em { color:#ddd; }

匹配任何在 h1 内的 em，不论它是子元素、孙子元素、曾孙元素等等。例如：

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

This one:

h1 > em { color:#ddd; }

只匹配作为h1的子元素而不是孙子、曾孙等的em。因此：

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

- RichieHindle

---

谢谢你澄清这个问题。这是我一直想知道但一直没有使用过的东西之一。我可以看出它会很有用。 - Ken

请注意，Internet Explorer 6 不支持 > 选择器，但该选择器在 IE7 和 IE8 中得到支持。 - Sander Marechal

只是为了确认术语，第一个是后代选择器，第二个是子选择器。关于“后代”和“子”的区别，您可以查看dictionary.com。 - Paul D. Waite

对于“descendant”和“child”的区别，你可以去dictionary.com查一下。说得好，Paul。楼主的母语不是英语吗？即使不是，他们足够懂英语来写问题，也应该足够了解两个单词并查一下。 - AmbroseChapel

嗯，阅读英语和阅读代码之间并不总是容易切换，我认为它们是不同的思维方式（这也是为什么 Jeff 和其他人发现伪代码很难 的原因）。但是，希望将这些概念融入您的头脑中将有助于理解 HTML 和 CSS。 - Paul D. Waite

Answer 2

也许这不是你给出的最好的例子，但我会继续解释：

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

em会匹配我示例中的所有em。

em只会匹配直接作为h1子元素的em，而不会匹配第二层的em。

- rball

Answer 3

h1 em { color:#ddd; }

的意思是："h1内的em"

h1 > em { color:#ddd; }

意思是：带有父级h1的em

- eKek0

Answer 4

在编程中，使用 > 符号的子选择器可以仅选择H1标签的直接子级中的EM标签。

以下示例是最简单的解释方式：

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

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

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

- Justin Yost

Answer 5

后代元素指的是在 DOM 树中任何时候出现在包含元素下方的任何元素（即子元素、孙子元素等关系）。子元素是直接位于包含元素下方的元素。

使用这种选择器的真实世界影响是，子元素选择器以及相邻元素选择器都不受 IE6 支持。

- roryf

Answer 6

顺便提一下，使用 > 仍然存在许多浏览器兼容性问题，这是我会使用 jQuery 或至少在部署之前测试所有目标浏览器的情况。

- Jarrett Widman