如何修改Bootstrap 4指定卡片链接颜色且不影响同页其他卡片

你之前的写法问题在于.card a选择器会匹配页面所有带card类的元素内部链接，只要把选择器的匹配范围限制到目标卡片本身，就不会影响其他卡片样式。

操作步骤 #

• 给需要修改链接样式的目标卡片添加一个自定义专属类（比如card-white-link），作为样式匹配的唯一标识
• 将原有CSS的通用.card选择器替换为该专属类选择器，让样式仅对目标卡片生效

代码实现 #

修正后的CSS #

/* 仅匹配加了card-white-link类的卡片内的链接，不影响其他普通卡片 */
.card-white-link a:link,
.card-white-link a:visited,
.card-white-link a:hover,
.card-white-link a:active {
  color: #ffffff;
}
.card-white-link a:hover {
  text-decoration: none;
}

修正后的目标卡片HTML #

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div class="col-md-6">
  <!-- 给目标卡片追加自定义专属类 -->
  <div class="card py-4 card-container card-white-link">
    <a href="#">
      <div class="card-body">
        <i class="fa-light fa-book-open my-4" style="font-size: 36px"></i><br/>
        <p class="card-text text-center">CODE SAMPLES</p>
      </div>
    </a>
  </div>
</div>

可选方案 #

如果该特殊样式卡片是页面独有的，也可以给卡片设置唯一id，用id选择器匹配样式，优先级更高：

<div class="card py-4 card-container" id="special-link-card">

对应CSS：

#special-link-card a:link,
#special-link-card a:visited,
#special-link-card a:hover,
#special-link-card a:active {
  color: #fff;
}
#special-link-card a:hover {
  text-decoration: none;
}

提示：id在单个HTML页面中只能出现一次，适合唯一元素；自定义类可以重复使用，如果后续有其他卡片需要相同样式，直接给对应卡片加上该类即可，复用性更强。

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