html - 如何使不同的div在CSS中具有不同的内容颜色

Question

在我的元素中，我在网页中使用了 bootstrap。

这是我的 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{ 颜色:绿色； }

如果你希望每个偶数 p 都是绿色 .detail-module-cont p:nth-child(even) { 颜色:绿色； }