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

96

我有类似的东西：

<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>

第二个div（“内容” div中的第一个div）的css选择器是什么，以便我可以在该div中设置日期的字体颜色？

css css-selectors

— 格雷格
source

1

请接受接受最高投票的答案，这绝对是正确的。

— 巴里·迈克尔·道尔

227

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

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

这会将CSS应用于#content的直接子元素的第一个div（可能是也可能不是#content的第一个子元素）

另外的选择：

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

— 杰里米·莫里茨（Jeremy Moritz）
source

6

同意这是对该问题的唯一正确答案，应该接受。

— Ilya Streltsyn

您能告诉我如何选择所有div except首/末div吗？

— 2013年

5

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

— 杰里米·莫里茨

@Tân如果您要除第一个和最后一个之外的所有div，那就应该是 #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

20

你要

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

— 上尉奥蒂斯
source

3

无法工作，因为<div>不是第一个孩子（是<h1>）。

— Josh Leitzel's

更不用说即使日期div是第一个孩子，它也不会在IE中起作用。

— Valentin Flachsel

1

真？W3表示只要指定了doctype。（老实说我不知道。）

— Josh Leitzel 2010年

3

只需运行一个测试，如果指定了doctype，它确实可以工作。以我的辩护，如果您在文件顶部键入<the_cake_is_a_lie>，那么如果在IE中开始工作，我不会感到惊讶...

— Valentin Flachsel 2010年

1

我总是在发布答案之前先进行测试。蛋糕是骗人的。

— 上尉奥蒂斯2010年

16

如果我们可以假设H1总是在那里，那么

div h1+div {...}

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

#content h1+div {...}

这样就可以立即获得跨浏览器，而无需借助jQuery之类的JavaScript库。使用h1 + div可以确保只有H1之后的第一个div才能获得样式。有替代方法，但是它们依赖CSS3选择器，因此不适用于大多数IE安装。

— 斯坦·罗杰斯
source

+1。甚至都没有想到。请记住，此解决方案在IE6中不起作用。

— Josh Leitzel

6

与您正在寻找的最接近的东西是：first-child伪类 ; 不幸的是，这不适用于您的情况，因为您在<h1>之前有一个<div>s。我的建议是，您可以将类添加到<div>，<div class="first">然后按这种方式设置样式，或者如果您确实无法添加类，请使用jQuery：

$('#content > div:first')

— 乔什·莱策尔（Josh Leitzel）
source

1

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

— Mateusz Odelga，2015年