如何在使用 Bootstrap 的 CSS 类 时更改 table 单元格的背景颜色？

Question

我正在使用 Bootstrap 5.0 CSS 并尝试使用我自己的一些 CSS 制作带有自定义单元格颜色的 table。 color 属性 工作正常，但是当我尝试使用 background 属性 更改背景颜色时，Bootstrap 忽略了规则。有谁知道如何解决这个问题？

我的代码：

td.colorfy {
    background: blue;
    color: white;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

Answer 1

只需使用 !importent 指令来覆盖 bootstrap 设置的任何其他行为。查看 here 了解更多信息。

td.colorfy {
    background: blue !important;
    color: white;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

或者在设置 css 规则时更具体：

.table td.colorfy {
    background: blue;
    color: white;
  }

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<table class="table table-bordered">
  <tr>
    <td class="colorfy">cell</td>
    <td>cell</td>
    <td>cell</td>
  </tr>
</table>

与 bootstrap css 一样，颜色指定为：

.table>:not(caption)>*>* {
    padding: .5rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg)
}

并且比您的定义更具体，它获胜。通过更具体地 bootstrap 或使用 !important 您可以获得新的背景颜色。