What CSS selector can be used to select the first div within another 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>

What is the css selector for the second div (1st div within the "content" div) such that I can set the font color of the date within that div?

231621 次浏览

小开

你想要的

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

小开

最接近您所寻找的是 : 第一个孩子伪类; 不幸的是，这将不工作在您的情况下，因为您有一个 <h1>之前的 <div>s。我的建议是，要么在 <div>中添加一个类，比如 <div class="first">，然后按照它的样式设置，要么在实际上不能添加类的情况下使用 jQuery:

$('#content > div.first')

小开

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

div h1+div {...}

但是不要害怕指定 content div 的 id:

#content h1+div {...}

这就像你现在不需要使用像 jQuery 这样的 JavaScript 库就可以获得跨浏览器的效果一样好。使用 H1 + div 可以确保只有 H1之后的第一个 div 获得样式。还有其他选择，但他们依赖于 CSS3选择器，因此不会在大多数 IE 安装。

小开

The MOST CORRECT answer to your question is...

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

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

另一个选择:

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