Làm thế nào để chọn đoạn đầu tiên trong một div với một lớp cụ thể (CSS 2)

Question

Tôi có một <div> chứa nhiều <p> yếu tố và cần phải áp dụng một số phong cách chỉ với <p> đầu tiên bên trong mỗi <div> với một lớp học cụ thể (CNT).

Xin lưu ý câu hỏi này có thể xuất hiện tương tự như những câu hỏi khác trên SO, nhưng vai trò tôi cần chỉ áp dụng cho lớp cnt, điều này làm cho nó khác nhau.

//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: tôi cần nó trong CSS 2 (không phải các CSS3 ít: thứ nhất-of-type hoạt động tuyệt vời)

Answer 1

dụ của bạn sẽ làm việc tốt

Demo

thay thế phương thức

Live Demo

Thử sử dụng bộ chọn first-of-type.

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

Đây là bộ chọn CSS3 và sẽ không hoạt động trên IE8.

Answer 2

Dưới đây là ví dụ sử dụng một phương pháp khác, không sử dụng: con đầu tiên.

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

Nó liên quan đến thiết lập một phong cách cho tất cả các thẻ p (để có được phong cách chung chung), sau đó duy nhất mà một thẻ p là sau khi một thẻ p sẽ nhiều phong cách bị ảnh hưởng. Bạn có thể sử dụng điều này cho lợi thế của mình, đặt TẤT CẢ các thẻ p để có kiểu của thẻ đầu tiên, sau đó ghi đè lên các thẻ khác

Answer 3

Một điều mà mọi người luôn quên là bộ chọn liền kề, công việc đó (ở một mức độ nào đó) trong IE7 +, hãy thử này:

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/