How to make different div has different content color in CSS

Question

In my project, I use bootstrap in web page.

Here is my css defintion:

<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>

Here is my html code:

<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>

The content1 of content p id has color #a2a2a2; but content2 I want it has color:green, How shoud i do? who can help me?

Answer 1

There could be multiple ways

Simplest way is like this #content2{ color: green; } #content2{ color: green; }

If you want every even p to have green color .detail-module-cont p:nth-child(even) { color: green; } .detail-module-cont p:nth-child(even) { color: green; }