Html 如何选择具有特定类的 div 中的第一段（CSS 2）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7473646/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to select the first paragraph in a div with a specific class (CSS 2)
提问by GibboK
I have a <div>containing many <p>elements and need to apply some style only to the first <p>inside every <div>with a specific class (cnt).
我有一个<div>包含许多<p>元素的元素，并且只需要将一些样式应用于<p>每个<div>具有特定类 (cnt)的第一个内部。
Please note this question may appear similar to others on SO, but the role I need should apply only for class cnt, which makes it different.
请注意，此问题可能与 SO 上的其他问题类似，但我需要的角色应仅适用于 class cnt，这使其有所不同。
//I use YUI 3 Reset and Grid:
<link href="http://yui.yahooapis.com/3.4.0/build/cssfonts/fonts.css" rel="stylesheet" type="text/css" />
<link href="http://yui.yahooapis.com/3.4.0/build/cssgrids/grids.css" rel="stylesheet" type="text/css" />
<div class="cnt">
<p>Number 1</p>
<p>Number 2</p>
<p>Number 3</p>
</div>
// I'm using this class without success!"
.cnt p:first-child
{
background-color:Red;
}
// Other classes could create some conflict
.cnt p
{
margin: 10px 0px 10px 0px;
}
.cnt h2, .cnt h3, .cnt h4, .cnt h5, .cnt h6
{
font-size: 16px;
font-weight: 700;
}
.cnt ul, .cnt ol
{
margin: 10px 0px 10px 30px;
}
.cnt ul > li
{
list-style-type: disc;
}
.cnt ol > li
{
list-style-type: decimal;
}
.cnt strong
{
font-weight:700;
}
.cnt em
{
font-style:italic;
}
.cnt hr
{
border:0px;
height:1px;
background-color:#ddddda;
margin:10px 0px 10px 0px;
}
.cnt del
{
text-decoration:line-through;
color:Red;
}
.cnt blockquote
{ margin: 10px;
padding: 10px 10px;
border: 1px dashed #E6E6E6;
}
.cnt blockquote p
{
margin: 0;
}
PS: I need it in CSS 2(neither the less CSS3 :first-of-type works great)
PS：我需要它CSS 2（无论是较少的 CSS3 :first-of-type 都很好用）
回答by Loktar
回答by Andres Ilich
One thing that people always forgets about are adjacent selectors, that work (to some extent) in IE7+, try this:
人们总是忘记的一件事是相邻选择器，它在 IE7+ 中工作（在某种程度上），试试这个：
HTML
HTML
<div class="paragraph">
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
<p>some paragraph</p>
</div>
CSS
CSS
p {
color:black;
}
.paragraph p {
color:red;
}
.paragraph p + p {
color:black;
}
回答by Chris
Here is an example using a different method, not using :first-child.
这是使用不同方法的示例，而不是使用 :first-child。
http://jsfiddle.net/chricholson/dp3vK/6/
http://jsfiddle.net/chricholson/dp3vK/6/
It involves setting a style for all p tags (to get generic styling), then only where a p tag is after a p tag will more styles be affected. You can use this to your advantage, set ALL the p tags to have the style of the first tag, then overwrite for the others
它涉及为所有 p 标签设置样式（以获得通用样式），然后只有 ap 标签在 ap 标签之后的位置才会影响更多样式。您可以充分利用这一点，将所有 p 标签设置为第一个标签的样式，然后覆盖其他标签
