[英]How to make different div has different content color in CSS
In my project, I use bootstrap in web page. 在我的项目中,我在网页中使用引导程序。
Here is my css defintion: 这是我的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>
Here is my html code: 这是我的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> I love you too</div>
</p>
</div>
</li>
</ul>
</div>
The content1 of content p id has color #a2a2a2; 内容p id的content1具有颜色#a2a2a2; but content2 I want it has color:green, How shoud i do? 但是content2我希望它具有颜色:绿色,我应该怎么做? who can help me? 谁能帮我?
There could be multiple ways 可能有多种方式
Simplest way is like this #content2{ color: green; }
最简单的方法是这样的#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; }
如果您希望每个偶数p都具有绿色,请使用.detail-module-cont p:nth-child(even) { color: green; }
.detail-module-cont p:nth-child(even) { color: green; }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.