无法在bootstrap导航栏中使用伪类定位第一个链接

Question

这是我的导航栏：

每个链接的左侧和右侧都有29px填充。为了最大化可用空间量，我试图从第一个链接中移除左边距，从最后一个链接中删除右边距。

CSS：

.nav > li > a {
    padding-left: 29px;
    padding-right: 29px;
    font-family: 'Lato', sans-serif;
    font-weight: 400;
    font-size: 1.15em;
}

.nav > li > a:first-child {
    padding-left: 0px;
}

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

我认为最后两条规则可以完成我想要的，但它只是从每一个元素中删除了左右填充。

Answer 1

CSS pseudo-classes允许您根据各种因素将元素应用于元素，包括它们与文档树的关系。

来自MDN：

  

  

• :first-child   CSS伪类表示任何第一个子元素   其父母的元素。

  

• :last-child   CSS伪类表示最后一个子元素的任何元素   它的父母。

  

在您的HTML中，<a>元素似乎是单独嵌套的，作为每个<li>元素的子元素。因此，当您应用代码时......

.nav > li > a:first-child { padding-left: 0px; }
.nav > li > a:last-child { padding-right: 0px; }

... :first-child和:last-child个伪类与每个<a>的同一个奇异<li>子项匹配，并且填充内容全部删除。< / p>

如果您要列出每个<a>中五个<li>元素的列表，那么您的规则就会删除第一个和最后一个{{1}的填充根据上面的定义，在每个<a>的列表中。再一次，不是你想要的。

如评论中所述，要从第一个和最后一个链接中删除填充，请将伪类应用于<li>标记。

<li>