：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樣式應用於最後一個選擇器。以前的作爲上下文（或容器）。