如何在使用 Bootstrap 表格格式时覆盖特定的表格边框 CSS 样式

Question

我正在使用带有表格的 Bootstrap，并尝试对默认 CSS 进行一些小的覆盖，但成功率有限。

在下表中，我可以在表头 (thead) 的底部和页脚中的表行底部（tfoot 中的 tr）添加一个黑色边框，但我无法向最后一个表格行的底部 (tr:last-child)，或者是表格主体的底部 (tbody)，或者我想是表格页脚的顶部 (tfoot)。

我在这方面取得了有限的成功：

.table-sm.event-table tbody > tr:last-child {
    border-bottom: 2px solid #999;
}

然而，这不会在所有浏览器中呈现，并且只能通过使单个像素浅灰色线成为 2 像素暗线来“工作”，这是我不想要的，我只想要在最后一行之间的单个像素暗边框正文和页脚的第一行（在第二行和总费用之间）。

我知道这与 CSS 规则的特殊性有关，并且 Bootstrap 的规则优先于我自己的规则，但是即使我能够使其他规则起作用，我也无法终生弄清楚如何指定这个规则.

.table-sm.event-table tbody > tr:last-child {
    border-bottom: 2px solid #999;
}

.event-table {
	width: 100%;
}

.table thead > tr > th { 
	border-bottom: 1px solid #333;
}

.table tfoot > tr > td { 
	border-bottom: 1px solid #333;
}

Answer 1

特殊性是游戏的名称，如果您使用 Bootstrap，您会很快了解到它变得非常复杂，甚至几乎不可能。虽然使用#idsand!important可能是对您的情况的直接补救措施，但如果使用它们，即使只是适度使用，它也会在@rse 中咬您。#id如果必须，请尝试只使用少数几个，并!important不惜一切代价避免。

一个更安全的解决方案是在一个类上加倍：

作为 (2) 的一个无意义的特例，当您没有更多需要指定时，复制简单的选择器以增加特异性。

MDN - 重要的例外

以下演示的每个表格部分（即<thead>、<tbody>、 和<tfoot>）的最后一行border-bottom颜色不同。请注意，bootstrap.css 文件也已加载，因此据我所知和手头的证据，它确实可以工作。

演示

.event-table {
  width: 100%;
}

.table thead>tr.rowA1.rowA1>th {
  border-bottom: 1px solid red;
}

.table tbody>tr.rowB2.rowB2>td {
  border-bottom: 1px solid lime;
}

.table tfoot>tr.rowC2.rowC2>td {
  border-bottom: 1px solid blue;
}

<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<table class="table table-bordered table-sm event-table">
  <thead>
    <tr class='rowA1'>
      <th>Unit</th>
      <th>Total</th>
    </tr>
  </thead>

  <tbody>
    <tr class='rowB1'>
      <td>Row One</td>
      <td>$100</td>
    </tr>
    <tr class='rowB2'>
      <td>Row Two</td>
      <td>$100</td>
    </tr>
  </tbody>

  <tfoot>
    <tr class='rowC1'>
      <td>Total Expense $</td>
      <td>$200</td>
    </tr>
    <tr class='rowC2'>
      <td>Total Revenue $</td>
      <td>$300</td>
    </tr>
  </tfoot>
</table>