什么CSS选择器可用于选择另一个div内的第一个div？

Question

我有类似以下这样的东西：

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

Some content

Author Date

- GregH

---

请接受最高票答案，它绝对是正确的。 - Barry Michael Doyle

Answer 1

你问题的最正确答案是...

#content > div:first-of-type { /* css */ }

这将应用CSS样式到#content的第一个直接子元素的div上（该div可能是#content的第一个子元素，也可能不是）。

另一个选项：

#content > div:nth-of-type(1) { /* css */ }

- Jeremy Moritz

---

同意这是问题的唯一正确答案，应该被接受。 - Ilya Streltsyn

你能告诉我如何选择除第一个/最后一个div之外的所有div吗？ - Tân

@HappyCoding #content > div:not(:last-of-type) { /* css */ } - Jeremy Moritz

@Tân 如果你想选中所有除第一个和最后一个之外的div，可以使用以下代码... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ } - Jeremy Moritz

Answer 2

你想要什么。

#content div:first-child {
/*css*/
}

- Capt Otis

---

无法生效，因为<div>不是第一个子元素（它的第一个子元素是<h1>）。 - Josh Leitzel

更不用说如果日期“div”是第一个子元素，它在IE中根本无法工作。 - Valentin Flachsel

真的吗？W3说只要指定了文档类型，它就可以。 （不过我真的不确定。） - Josh Leitzel

刚才进行了一项测试，如果指定文档类型确实可以运行。为了辩解，如果在文件顶部键入 <the_cake_is_a_lie>，我不会感到惊讶，如果在IE中开始工作... - Valentin Flachsel

我总是在回答问题之前进行测试。而且蛋糕是假的。 - Capt Otis

Answer 3

如果我们可以假设H1标签始终存在，那么

div h1+div {...}

但不要害怕指定内容div的id：

#content h1+div {...}

目前在不使用像jQuery这样的JavaScript库时，这是您可以跨浏览器获得的最佳解决方案。 使用h1 + div可以确保只有H1后面的第一个div获得样式。虽然存在其他选择，但它们依赖于CSS3选择器，因此在大多数IE安装中无法工作。

- Stan Rogers

---

+1。我甚至没有想到那个。请记住，这个解决方案在IE6中不起作用。 - Josh Leitzel

Answer 4

你要寻找的最接近的东西是:first-child伪类；不幸的是，在你的情况下这个方法行不通，因为在<div>之前有一个<h1>。我建议你为<div>添加一个类，例如<div class="first">，然后进行样式设置，或者如果你真的不能添加类，请使用jQuery：$('#content > div.first')。

- Josh Leitzel

---

拼写错误 - 应该是 $('#content > div.first) - Mateusz Odelga