如何在CSS中为不同div设置不同内容颜色（Bootstrap项目场景）

没问题，针对你在Bootstrap项目里要给不同div设置不同内容颜色的需求，我结合你现有的代码，整理了几种简单易上手的方案：

方案1：添加自定义类名（最灵活可控） #

给需要改颜色的detail-recode div单独加自定义类，然后在CSS里写对应颜色规则，完全贴合你的现有结构：

修改后的HTML示例 #

<div class="detail-module-cont">
  <!-- 第一个带红色内容的项 -->
  <div class="detail-recode-item">
    <div class="detail-recode recode-red">
      <div class="detail-recode-cont">红色内容的文本</div>
    </div>
  </div>
  <!-- 第二个带蓝色内容的项 -->
  <div class="detail-recode-item">
    <div class="detail-recode recode-blue">
      <div class="detail-recode-cont">蓝色内容的文本</div>
    </div>
  </div>
</div>

补充的CSS规则 #

/* 自定义红色内容 */
.recode-red .detail-recode-cont {
  color: #dc3545; /* Bootstrap danger色，也可以换你要的颜色值 */
}
/* 自定义蓝色内容 */
.recode-blue .detail-recode-cont {
  color: #0d6efd; /* Bootstrap primary色 */
}

方案2：直接用Bootstrap内置文本颜色类（最省心） #

既然你用了Bootstrap框架，它自带了一套现成的文本颜色类，直接加到目标div上就能用，不用额外写CSS：

HTML示例 #

<div class="detail-module-cont">
  <div class="detail-recode-item">
    <div class="detail-recode">
      <div class="detail-recode-cont text-primary">Bootstrap默认蓝色文本</div>
    </div>
  </div>
  <div class="detail-recode-item">
    <div class="detail-recode">
      <div class="detail-recode-cont text-success">Bootstrap默认绿色文本</div>
    </div>
  </div>
  <div class="detail-recode-item">
    <div class="detail-recode">
      <div class="detail-recode-cont text-warning">Bootstrap默认黄色文本</div>
    </div>
  </div>
</div>

常见的Bootstrap文本颜色类还有text-danger（红色）、text-info（青色）、text-secondary（灰色）等，完全满足日常需求。

方案3：用CSS伪类选择器（无需修改HTML） #

如果不想改动现有HTML结构，可以用CSS的nth-child等伪类选择器，按位置给不同div设置颜色：

补充的CSS规则 #

/* 第一个detail-recode-item里的内容设为红色 */
.detail-recode-item:nth-child(1) .detail-recode-cont {
  color: #dc3545;
}
/* 第二个detail-recode-item里的内容设为蓝色 */
.detail-recode-item:nth-child(2) .detail-recode-cont {
  color: #0d6efd;
}
/* 第三个及以后的设为灰色（原默认色） */
.detail-recode-item:nth-child(n+3) .detail-recode-cont {
  color: #a2a2a2;
}

这种方法适合内容是固定顺序生成的场景，不用动HTML代码就能实现差异化颜色。

内容的提问来源于stack exchange，提问作者stack