可以使用什么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>

什么是第二个div的css选择器("content"div中的第一个div),这样我可以设置该div中日期的字体颜色？

Answer 1

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

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

这将CSS应用于第一个div,它是#content的直接子节点(可能是也可能不是#content的第一个子元素)

另外一个选项:

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

Answer 2

你要

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

Answer 3

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

div h1+div {...}

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

#content h1+div {...}

这就像你现在可以获得跨浏览器一样好,而不需要使用像jQuery这样的JavaScript库.使用h1 + div确保只有H1之后的第一个div才能获得样式.有替代品,但它们依赖于CSS3选择器,因此不适用于大多数IE安装.

Answer 4

你所寻找的最接近的是:第一胎伪类 ; 不幸的是,这对你的情况不起作用,因为你有一个<h1>之前<div>s.我建议你要么添加一个类,然后<div>像那样设置<div class="first">样式,或者如果你真的不能添加一个类就使用jQuery:

$('#content > div:first')