I have something like:
我有类似:
<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?
第二个div(“content”div中的第一个div)的css选择器是什么，以便我可以在这个div中设置日期的字体颜色?
4 个解决方案
#1
162
The MOST CORRECT answer to your question is...
你的问题最正确的答案是……
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
这将把CSS应用到第一个div，它是#content的直接子元素(可能是也可能不是#content的第一个子元素)
Another option:
另一个选择:
#content > div:nth-of-type(1) { /* css */ }
#2
16
If we can assume that the H1 is always going to be there, then
假设H1总在那里
div h1+div {...}
but don't be afraid to specify the id of the content div:
但是不要害怕指定content div的id:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
这差不多就是你现在不用借助像jQuery这样的JavaScript库就可以跨浏览器了。使用h1+div确保只有h1之后的第一个div获得样式。有其他选择，但它们依赖于CSS3选择器，因此在大多数IE安装中都不起作用。
#3
13
You want
你想要的
#content div:first-child {
/*css*/
}
#4
4
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
最接近你要找的是:第一个孩子的伪类;不幸的是，这在您的示例中行不通，因为在
。我的建议是，您要么向
添加一个类，比如
，然后按照这种方式进行样式化，要么使用jQuery，如果您真的不能添加一个类:
$('#content > div:first')
$(' > #内容div:首先')
#1
162
The MOST CORRECT answer to your question is...
你的问题最正确的答案是……
#content > div:first-of-type { /* css */ }
This will apply the CSS to the first div that is a direct child of #content (which may or may not be the first child element of #content)
这将把CSS应用到第一个div，它是#content的直接子元素(可能是也可能不是#content的第一个子元素)
Another option:
另一个选择:
#content > div:nth-of-type(1) { /* css */ }
#2
16
If we can assume that the H1 is always going to be there, then
假设H1总在那里
div h1+div {...}
but don't be afraid to specify the id of the content div:
但是不要害怕指定content div的id:
#content h1+div {...}
That's about as good as you can get cross-browser right now without resorting to a JavaScript library like jQuery. Using h1+div ensures that only the first div after the H1 gets the style. There are alternatives, but they rely on CSS3 selectors, and thus won't work on most IE installs.
这差不多就是你现在不用借助像jQuery这样的JavaScript库就可以跨浏览器了。使用h1+div确保只有h1之后的第一个div获得样式。有其他选择，但它们依赖于CSS3选择器，因此在大多数IE安装中都不起作用。
#3
13
You want
你想要的
#content div:first-child {
/*css*/
}
#4
4
The closest thing to what you're looking for is the :first-child pseudoclass; unfortunately this will not work in your case because you have an <h1> before the <div>s. What I would suggest is that you either add a class to the <div>, like <div class="first"> and then style it that way, or use jQuery if you really can't add a class:
最接近你要找的是:第一个孩子的伪类;不幸的是，这在您的示例中行不通，因为在
。我的建议是，您要么向
添加一个类，比如
，然后按照这种方式进行样式化，要么使用jQuery，如果您真的不能添加一个类:
$('#content > div:first')
$(' > #内容div:首先')