Bootstrap4中CSS无法修改文本颜色问题排查求助

问题场景 #

使用Bootstrap4构建页脚区域，外层div添加了greenfooter类用于设置背景色和内边距，内部包含container和四列布局。期望实现：

• h5标签显示浅绿色（#C8E72F）
• a标签默认白色，hover状态变为浅绿色且无文本装饰
  但自定义CSS的颜色修改未生效，需排查原因。

原始代码 #

HTML #

<div class="w-100 g-py-30 greenfooter">
    <div class="container">
        <div class="row">
        <div class="col-md-3">
            <h5>McDowell Technical<br>
            Community College</h5>
            <p>54 College Drive<br>
              Marion, NC 28752</p>
            <p>
            <a href="https://www.google.com/maps/place/McDowell+Technical+Community+College/@35.6555866,-81.9620476,15z/data=!4m5!3m4!1s0x0:0xf42cd81f2a7dd3ec!8m2!3d35.6555866!4d-81.9620476" target="_blank" class="g-color-white">Get Directions</a> </p>
            <h5>call: 828-652-6021 </h5>
        </div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        <div class="col-md-3"></div>
        </div>
    </div>
</div>

原始CSS #

.greenfooter {
    background-color: #5C8627;
    color: white;
}
.greenfooter.container.row.col-md-3 h5 {
    color: #C8E72F;
}

.greenfooter.container.row.col-md-3 a {
    color: #ffffff;
}

.greenfooter.container.row.col-md-3 a:hover {
    color: #C8E72F;
    text-decoration: none;
}

错误原因 #

• CSS选择器写法错误：.greenfooter.container.row.col-md-3 这种写法表示选择同时拥有这四个类的元素，但实际DOM结构中，greenfooter、container、row、col-md-3是嵌套的不同元素，正确的嵌套选择器需要用空格分隔，而非直接连写类名。
• a标签优先级冲突：a标签添加了g-color-white类，该类的样式优先级可能高于自定义的选择器，导致颜色无法覆盖。

修正后的CSS #

方案一（保留g-color-white类） #

.greenfooter {
    background-color: #5C8627;
    color: white;
}
/* 选择greenfooter内的所有h5标签 */
.greenfooter h5 {
    color: #C8E72F;
}

/* 提高选择器优先级，覆盖g-color-white类样式 */
.greenfooter a.g-color-white {
    color: #ffffff;
}

.greenfooter a.g-color-white:hover {
    color: #C8E72F;
    text-decoration: none;
}

方案二（更优，移除g-color-white类） #

若可以修改HTML，移除a标签的g-color-white类，CSS可简化为：

.greenfooter {
    background-color: #5C8627;
    color: white;
}
.greenfooter h5 {
    color: #C8E72F;
}

.greenfooter a {
    color: #ffffff;
}

.greenfooter a:hover {
    color: #C8E72F;
    text-decoration: none;
}

说明 #

• 嵌套选择器使用空格分隔，代表“后代元素”关系，比如.greenfooter h5表示选择greenfooter类元素下所有的h5标签。
• 优先通过调整选择器优先级或修改HTML类名解决样式冲突，避免滥用!important。

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