什么CSSselect器可以用来select另一个div内的第一个div

我有这样的东西：

<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的CSSselect器），以便我可以设置该div中的date的字体颜色？

Answer 1

对你的问题最正确的答案是…

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

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

另外一个select：

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

Answer 2

如果我们可以假设H1总是在那里的话

 div h1+div {...} 

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

 #content h1+div {...} 

这就好像你现在可以跨浏览器而不使用像jQuery这样的JavaScript库。 使用h1 + div可确保只有H1之后的第一个div才能获得样式。 还有其他select，但是它们依赖于CSS3select器，因此在大多数IE安装中不起作用。

Answer 3

你要

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

Answer 4

最接近你要找的是：第一个孩子伪类 ; 不幸的是，在你的情况下这是行不通的，因为你在<div>s之前有一个<h1> 。 我会build议你或者添加一个类到<div> ，比如<div class="first"> ，然后用这种方式来设置样式，或者如果你真的不能添加一个类，可以使用jQuery：

$('#content > div:first')