如何更改最后一张桌子的边框颜色

Question

我有一个基本表，有一些行。每行的边框底部为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;
}

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

Answer 1

您需要将border-bottom设置为'none'，您还可以使用:last-child选择器

直接选择最后一行而无需为其分配类

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

您可能还想添加：

#products{
    border-collapse:collapse;
}

Answer 2

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

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

）来避免这种情况

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

Answer 3

这是css specificity。 #products tr选择器是最具体的，所应用的选择器也是如此。为了提高后期选择使用的特异性：

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