（CSS 2）

Question

は私が<div>含む多くの<p>の要素を持っていると特定のクラス（CNT）を持つすべての<div>内のみ最初<p>にいくつかのスタイルを適用する必要があります。

この質問は他の人に似ているかもしれませんが、私が必要とする役割はクラス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

あなたの例では、

Demo

細かい代替を動作するはずです方法

Live Demo

セレクタfirst-of-typeを試してみてください。

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

IE3はCSS3セレクタですが、IE8では動作しません。

Answer 2

ここでは、first-childを使用せず、別の方法を使用する例を示します。

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

これは、pタグがより多くのスタイルが影響を受けることになります後、次にpタグがある場合にのみ、（一般的なスタイリングを得るために）全てのpタグのスタイルを設定することが含まれます。これを利用して、すべてのpタグを最初のタグのスタイルに設定してから、他のタグを上書きすることができます。

Answer 3

人が常に忘れていることは、 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/