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

最接近你要找的是:first-child pseudoclass;遗憾的是，由于您在<h1>之前有<div>s，因此这不适用于您的情况。我建议您在<div>中添加一个类，如<div class="first">，然后按照这种方式设置样式，或者如果您真的无法添加类，则使用jQuery：

$('#content > div:first')

可以使用什么CSS选择器来选择另一个div中的第一个div

4 个答案: