Как выделить первый абзац в div с определенным классом (CSS 2)

Question

У меня есть <div>, содержащий много <p> элементов, и мне нужно применить какой-либо стиль только к первому <p> внутри каждого <div> с определенным классом (cnt) .

Обратите внимание, что этот вопрос может выглядеть аналогично другим в 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: мне это нужно в CSS 2 (и тем не менее CSS3: первый в своем роде отлично работает)

Answer 1

Ваш пример должен работать нормально

Демо

Альтернативный метод

Демонстрация в реальном времени

Попробуйте использовать селектор first-of-type.

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

Это селектор CSS3, однако он не работает на IE8.

Answer 2

Одна вещь, о которой люди всегда забывают, это смежные селекторы, которые работают (в некоторой степени) в 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/

Answer 3

Вот пример использования другого метода, не используя: first-child.

http://jsfiddle.net/chricholson/dp3vK/6/

Это включает в себя установку стиля для всех тегов p (для получения общего стиля), тогда будет затронуто больше стилей только в том случае, если тег p находится после тега p. Вы можете использовать это в своих интересах, установить ВСЕ теги p, чтобы они имели стиль первого тега, а затем перезаписать для остальных