如何更改引导选项卡中最后一个选项卡的CSS

我在引导选项卡上正确设置了边距，如下所示：

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

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

但是，我想在最后一个选项卡上将边距设置为零。例如，如果我有三个选项卡，前两个选项卡的右边距应为30，最后一个选项卡的右边距应为0

你知道怎么做吗？明信片上的答案…

你可以这样做

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

你可以试试这个

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

---

如果HTML是这样的：

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

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

您可以使用CSS伪选择器来处理此问题，因为它将按预期的那样以与给定类型匹配的最后一个元素为目标：

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

您可以在下面进行演示（使用颜色帮助指示目标）：