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

Question

我正在使用 Bootstrap 5.0 CSS，并尝试使用我自己的一些 CSS 制作具有自定义单元格颜色的表格。 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 指令来覆盖引导程序设置的任何其他行为。请查看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)
}

这比你的定义更具体，它赢了。通过更具体的引导程序或使用!important，您可以获得新的背景颜色。