如何使不同的div在CSS中具有不同的內容顏色

Question

在我的項目中，我在網頁中使用引導程序。

這是我的CSS定義：

<style>
.detail-module-cont {
  padding: 20px;
}
.detail-recode-item {
  display: table;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 25px;
  border-top: 1px dashed #d3d3d3;
  color: #a2a2a2;
  font-size: 12px;
  table-layout: fixed;
}

.detail-recode {
  display: table-cell;
  padding-top: 5px;
  vertical-align: top;
}

.detail-recode-cont {
  line-height: 24px;
  word-wrap: break-word;
}
</style>

這是我的html代碼：

<div class="page-header"><h2>AAAAA<small>BB</small></h2></div> 
<div class="well well-lg col-sm-8">
 <ul class="detail-module-cont" id="listenImg"> 

   <li class="detail-recode-item">                                                                          
     <div class="detail-recode">                                                                            
       <p class="detail-recode-cont" id="content1">Hello, John, long time no see you, i miss you</p>                                       
     </div>                                
   </li>                                                                  

   <li class="detail-recode-item">                                        
     <div class="detail-recode recode-item-system ">                                                   
       <p class="detail-recode-cont" id="content2">Hi, Jack, I miss you every day。
           <div>&nbsp;I love you too</div>
       </p>
     </div>                                  
   </li>

  </ul>  
</div>

內容p id的content1具有顏色＃a2a2a2； 但是content2我希望它具有顏色：綠色，我應該怎么做？ 誰能幫我？

Answer 1

可能有多種方式

最簡單的方法是這樣的#content2{ color: green; } #content2{ color: green; }

如果您希望每個偶數p都具有綠色，請使用.detail-module-cont p:nth-child(even) { color: green; } .detail-module-cont p:nth-child(even) { color: green; }