如何更改最后一个表格的 <tr> 边框颜色答案

【问题标题】：How to change last table's <tr> border color如何更改最后一个表格的 <tr> 边框颜色
【发布时间】：2014-06-29 21:54:21
【问题描述】：

我有一个包含一些行的基本表。每行的边框底部为 2px，但我希望最后一行根本没有任何底部。但是，我似乎无法用我当前的代码做到这一点。

<table id="products">
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr class="productsBottom"></tr>
</table>

这是我的 CSS：

#products tr {
    height: 94px;
    border-bottom: 2px solid #e5e5e5;
}

tr.productsBottom {
    border-bottom: 0px solid;
}

对此有任何帮助吗？我似乎不明白为什么当我添加背景颜色时它会起作用，但是以任何方式更改边框似乎没有任何作用？

【问题讨论】：

【解决方案1】：

您需要将border-bottom 设置为'none'，您也可以使用:last-child 选择器直接选择最后一行而无需为其分配类

#products tr:last-child{
    border-bottom:none;
}

您可能还想添加：

#products{
    border-collapse:collapse;
}

【讨论】：

【解决方案2】：

您的 CSS 中的第一个选择器具有更大的 specificity，因此如果您将边框设置为零，它将覆盖第二个选择器。

您可以通过使用 !important 关键字或更具体的选择器（例如

）来避免这种情况

#products tr.productsBottom {
   border-bottom: 0px solid;
}

【讨论】：

【解决方案3】：

这取决于css specificity。 #products tr 选择器最具体，所应用的选择器也是如此。为了增加后面选择器使用的特异性：

#products tr.productsBottom {
    border-bottom: 0px solid;
}

【讨论】：