如何在Bootstrap选项卡中更改最后一个选项卡的CSS

Question

我在我的Bootstrap选项卡上设置了margin-right，如下所示：

.nav-tabs > li > a {
    margin-right: 30px;
}

但是，我想在最后一个标签上将margin-right设置为零。 IE浏览器。如果我有三个标签，前两个标签的边距为30，最后一个标签的右边距为0.

有关如何做到这一点的想法？明信片上的答案......

Answer 1

您可以使用CSS :last-of-type伪选择器来处理此问题，因为它将按预期定位与给定类型匹配的最后一个元素：

.nav-tabs > li:last-of-type > a {
    margin-right: 0;
    /* Define any other styles here */
}

您可以see a working example of this here并在下面进行演示（使用颜色来指示定位）：

Answer 2

你可以这样做

.nav-tabs > li:last-of-type > a {
    margin-right: 0;
}

Answer 3

你可以试试这个

.nav-tabs > li:last-child > a {
    margin-right: 0px;
}

Answer 4

如果HTML是这样的：

<ul class="nav-tabs">
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
  <li><a href="#">link</a></li>
</ul>

您可以选择最后一个li并为其或a孩子提供一个保证金权限：

.nav-tabs > li:last-of-type {
    margin-right: 0;
}
/*OR*/
.nav-tabs > li:last-of-type > a {
    margin-right: 0;
}