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

Question

我将 Bootstrap 与表格一起使用，并尝试对默认 CSS 进行一些小的覆盖，但收效甚微。

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

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

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

然而，这并没有在所有浏览器中呈现，只有通过将单像素浅灰色线变成 2 像素深线才能“工作”，我不想要，我只想要最后一个之间的单像素深色边框正文行和页脚第一行(在第二行和总费用之间)。

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

.event-table {
	width: 100%;
}

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

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

    <table class="table table-bordered table-sm event-table">
      <thead>
        <tr>
            <th>Unit</th>
            <th>Total</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td>Total Expense $</td>
          <td class="text-right">$200</td>
        </tr>
        <tr>
          <td>Total Revenue $</td>
          <td class="text-right">$300</td>
        </tr>
      </tfoot>

      <tbody>
        <tr>
            <td>Row One</td>
            <td>$100</td>
        </tr>
        <tr>
            <td>Row Two</td>
            <td>$100</td>
        </tr>
      </tbody>
    </table>

Answer 1

Specificity是游戏的名称，如果您使用 Bootstrap，您会很快了解到它变得非常复杂，甚至几乎是不可能的。使用 #ids 时和 !important可能是对您的情况的立即补救措施，即使只是适度使用它们，它也会在@rse 中咬住您。尝试只使用少数 #id如果你必须避免!important不惜一切代价。

一个更安全的解决方案是加倍上课:

As a nonsense special case for (2), duplicate simple selectors to increase specificity when you have nothing more to specify.

MDN - The !important exception

下面的演示有每个表部分(即 <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>