Question

我想选择<body>的{{1}}的第一个孩子，而仅该元素。

我在为我想要的元素制定正确的选择器时遇到了麻烦。我可以简单地给它一个ID，但现在我很好奇这是否有可能。

在这种简单的情况下：

<div>

我可以使用子选择器：

<body>
  <div></div>
</body>

但如果body > div { margin: 0 auto 0 auto; width: 800px; }下面有两个<div>元素，那么现在会发生什么？

<body>

好吧，现在我可以使用<body> <div></div> <div></div> </body>伪类来进行选择。这非常有效：

first-child

但等一下。如果有人在body > div:first-child { margin: 0 auto 0 auto; width: 800px; }之前将另一个子元素添加到<body>？

，该怎么办？

<div>

在这种情况下，我如何只选择第一个<body> <a name="top"></a> <div></div> <div></div> </body>孩子（一般情况下）？

Answer 1

尝试first-of-type选择器

body > div:first-of-type
{
    margin: 0 auto 0 auto;
    width: 800px;
}

[编辑] 在您出现时查看nth-of-type。

[编辑] 添加了子选择器。

Answer 2

:first-child只会选择一些内容，如果它是其父

的第一个孩子

:first-of-type可以正常运行但是对此的支持是相当新的，并且不适用于旧浏览器（阅读IE）：http://reference.sitepoint.com/css/pseudoclass-firstoftype

根据您想要支持的内容或代码的复杂程度，您可能不得不回过头来为您的div提供课程。

Answer 3

在我看来first-of-type完成了这项工作。

Answer 4

如果你有可能“某人去贴另一个孩子”，那么你除了给它一个ID之外别无其他选择。

例如，如果你有一个<div>，而有人会在你之前插入另一个<div>，那么现有的CSS选择器就不适合你了。