如何选择具有特定类的div中的第一段（CSS 2）

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).

我有一个

包含许多

元素,并且需要将一些样式仅应用于具有特定类(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上的其他问题类似,但我需要的角色应仅适用于类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:第一类的工作效果都不错)

3 个解决方案

#1

Your example should work fine

你的例子应该工作正常

Demo

Alternate method

Live Demo

Try using the first-of-type selector.

尝试使用第一个类型选择器。

.cnt p:first-of-type{
    background-color:Red;
}

It is a CSS3 selector and wont work on IE8 however.

它是一个CSS3选择器,但不适用于IE8。

#2

One thing that people always forgets about are adjacent selectors, that work (to some extent) in IE7+, try this:

人们总是忘记的一件事是相邻的选择器,在IE7 +中工作(在某种程度上),试试这个:

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

p {
    color:black;
}

.paragraph p {
    color:red;
}

.paragraph p + p {
    color:black;
}

http://jsfiddle.net/andresilich/AHHrF/

#3

Here is an example using a different method, not using :first-child.

以下是使用不同方法的示例,而不是使用:first-child。

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标签设置样式(以获得通用样式),然后只有p标签位于p标签之后才会影响更多样式。您可以使用此优势,将所有p标记设置为具有第一个标记的样式,然后覆盖其他标记

#1