Bootstrap中text-white类在链接交互状态下失效问题求助

嘿，我之前也踩过Bootstrap样式优先级的坑，咱们来一步步解决你的问题！

问题根源：CSS选择器匹配错误+优先级不足 #

你写的自定义样式选择器是：

.text-white a:hover, .text-white a:active, .text-white a:visited { color: white; }

这个选择器的意思是选中所有带有.text-white类的元素内部的<a>标签，但你的实际代码是<a>标签本身就带着.text-white类，所以这个选择器根本匹配不到你的目标链接！再加上Bootstrap自带的.btn-primary:hover这类选择器优先级足够高，自然你的样式就没生效啦。

正确的解决方案 #

调整选择器，让它精准匹配你的<a>标签，同时提升优先级覆盖Bootstrap的默认样式。这里有两种靠谱的写法：

写法1：精准匹配所有目标状态

/* 直接选中带有这些类的a标签的对应状态 */
a.btn-primary.text-white:hover,
a.btn-primary.text-white:active,
a.btn-primary.text-white:visited {
  color: #fff !important; /* 加!important是为了确保覆盖Bootstrap的高优先级样式，不想用的话可以看下面的写法 */
}

写法2：更简洁的权重提升（推荐）

如果你不想用!important，可以通过叠加类选择器提升权重，同样能覆盖默认样式：

/* 利用多个类选择器叠加提升权重，无需!important也能生效 */
.btn-primary.text-white:hover,
.btn-primary.text-white:active,
.btn-primary.text-white:visited {
  color: #fff;
}

完整可复现的修正示例 #

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
  <style>
    .btn-primary.text-white:hover,
    .btn-primary.text-white:active,
    .btn-primary.text-white:visited {
      color: #fff;
    }
  </style>
</head>
<body>
  <a href="#" class="btn btn-primary text-white">A Link</a>

  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
</body>
</html>

额外小提示 #

• 调试CSS时可以用浏览器开发者工具（F12）查看元素样式面板，能直观看到哪些样式被覆盖，快速定位优先级问题。
• 尽量少用!important，它会让后续样式调试变复杂，优先通过调整选择器权重解决问题。

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