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{ color: green; }

如果你想要每个偶数p都有绿色 .detail-module-cont p:nth-child(even) { color: green; }

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

1 个答案: