：n-child不支持锚定标记

Question

我试图设计一个带有页眉，边栏，页脚和内容部分的页面模板。一切都是固定的，除了内容部分在溢出时滚动。

标题包含一个基本的导航栏，它包含一个无序列表，四个列表项和四个锚链接标签，链接到正常的“家”内容“'联系'页面。

每个链接都需要一个右边框，除了最后一个（第4个）之外。他们只是为了在视觉上将每一个分开。

下面的代码：

#top-nav { 
 
    background-color: orange; 
 
    height: 68px; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#top-nav ul { 
 
    font-size: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#top-nav li { 
 
    list-style-type: none; 
 
    text-align: center; 
 
    height:68px; /*100%, border  doesn't span full height*/ 
 
    margin: 0; 
 
    border-right: 1px solid black; 
 
    padding: 23.5px 95px; 
 
    display: inline-block; 
 
} 
 

 
#top-nav li:nth-child(4) { 
 
    border-right: none; 
 
} 
 

 
#top-nav a { 
 
    text-decoration: none; 
 
    color: black; 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    font-size: 16px; 
 
    display: block; 
 
}

<!-- \t \t <PAGE HEADER> \t \t --> 
 
<div id="header"> 
 
    <header> 
 

 
    <!-- \t \t <HEADER TITLE> \t \t --> 
 
    <div id="header-title"> 
 
     <h1>Page Header</h1> 
 
    </div> 
 
    <!-- \t \t </HEADER TITLE> \t \t --> 
 

 
    <!-- \t \t <HEADER NAVBAR> \t \t --> 
 
    <div id="top-nav"> 
 
     <ul> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Content</a> </li> 
 
     <li><a href="#">About</a> </li> 
 
     <li><a href="#">Contact</a> </li> 
 
     </ul> 
 
    </div> 
 
    <!-- \t \t </HEADER NAVBAR \t \t --> 
 

 
    </header> 
 
</div> 
 
<!-- \t \t </HEADER> \t \t \t -->

此代码按预期工作。

我想要做的是将造型方面移动到锚标签。

当我将样式转移到锚标记并将nth-child更改为而不是li时，它不起作用。

我也试过:last-child，但它有相同的结果，在li上工作，但不在a上。

编辑：

这里的CSS：

#top-nav { 
    background-color:orange; 
    height:68px; 
    margin:0; 
    padding:0; 
} 

#top-nav ul { 
    font-size:0; 
    margin:0; 
    padding:0; 
} 

#top-nav li { 
    list-style-type:none; 
    text-align:center; 
    height:68px; /*100%, border  doesn't span full height*/ 
    margin:0; 
/* border-right:1px solid black;*/ 
/* padding:23.5px 95px;*/ 
display:inline-block; 
} 

#top-nav a { 
    text-decoration:none; 
    color:black; 
    height:100%; 
    margin:0; 
    border-right:1px solid black; 
    padding:23.5px 95px; 
    font-size:16px; 
    display:block; 


#top-nav a:nth-child(4) { 
    border-right:none; 
} 

任何帮助将不胜感激。

Answer 1

我认为这将是足够的a选择添加到已为你工作的规则：

#top-nav li:nth-child(4) a{ 
    border-right: none; 
} 

的nth-child选择适用于兄弟姐妹的标签，所以它的正确使用它的li标签。添加a选择器，则表示要对第4个li中包含的a标记进行样式设置。

CSS样式应用于最后一个选择器。以前的作为上下文（或容器）。