Come selezionare il primo paragrafo di un div con una classe specifica (CSS 2)

Question

Ho un <div> che contengono molti <p> elementi e la necessità di applicare un po 'di stile solo per la prima <p> all'interno di ogni <div> con un specifica classe (cnt).

Si prega di notare che questa domanda potrebbe sembrare simile ad altre su SO, ma il ruolo che mi serve dovrebbe applicarsi solo per la classe cnt, che lo rende diverso.

//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: ho bisogno di CSS 2 (né tanto meno CSS3: first-of-type grandi opere)

Answer 1

Il vostro esempio dovrebbe funzionare bene

Demo

alternativo metodo

Live Demo

Provare a utilizzare il selettore first-of-type.

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

È un selettore CSS3 e non funziona su IE8.

Answer 2

Ecco un esempio utilizzando un metodo diverso, non si usa: first-child.

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

Si prevede la creazione di uno stile per tutti i tag p (per ottenere lo stile generico), salvo casi eccezionali un tag p è dopo un tag p sarà più stili influenzato. Puoi usare questo a tuo vantaggio, impostare TUTTI i tag p per avere lo stile del primo tag, quindi sovrascrivere per gli altri

Answer 3

Una cosa che le persone dimenticano sempre sono selettori adiacenti, che funzionano (in una certa misura) in IE7 +, provate questo:

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/