Bootstrap 4.1砂岩主题表格悬停颜色修改失效求助

嘿，我来帮你搞定这个表格悬停颜色的问题！你遇到的问题主要有两个核心原因：

问题根源 #

1. 选择器目标错误：你写的table.table-hover tbody tr.table-active td是针对带有table-active类的行（这是用来标记选中/激活的固定行），而不是鼠标悬停时的临时状态。Bootstrap的.table-hover组件是通过tr:hover伪类来控制悬停变色效果的。
2. 样式优先级被覆盖：Sandstone主题自带的.table-hover样式有更高的CSS优先级，导致你的自定义样式被压下去了，根本没生效。

具体解决方案 #

方法1：针对悬停状态写正确的选择器 #

直接瞄准tr:hover状态，同时通过增加选择器的特异性（比如加上父容器的ID）来确保你的样式能覆盖主题样式：

<head>
  <link href="https://maxcdn.bootstrapcdn.com/bootswatch/4.1.0/sandstone/bootstrap.min.css" rel="stylesheet" >
  <style type="text/css">
    /* 用父容器ID提高优先级，精准命中悬停行的单元格 */
    #filesTable .table-hover tbody tr:hover td {
      background-color: #fb9692;
      /* 如果还是被覆盖，可以临时加!important，但优先用高特异性选择器 */
      /* background-color: #fb9692 !important; */
    }
  </style>
</head>
<body>
  <div class="table-responsive" id="filesTable">
    <table class="table table-hover">
      <!-- 这里放你的表格内容 -->
      <tbody>
        <tr>
          <td>测试内容1</td>
          <td>测试内容2</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

方法2：如果确实需要用table-active类 #

如果你是想给选中的固定行（不是悬停行）设置颜色，那你的选择器是对的，但要记得给目标行手动加上table-active类：

<tr class="table-active">
  <td>这是被标记为激活状态的行</td>
</tr>

小技巧 #

可以用浏览器的开发者工具（按F12）查看表格行的样式，看看你的自定义样式是不是被划掉了——如果是，就说明优先级不够，再给选择器加个父元素的类或ID就行，尽量别用!important，不然以后维护样式会头疼~

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