：アンカータグでnth-childが動作していません

Question

ヘッダー、サイドバー、フッター、およびコンテンツセクションを含むページテンプレートを設計しようとしています。コンテンツセクションがオーバーフローでスクロールすることを除いて、すべてが固定されています。

ヘッダーには、順序付けられていないリスト、4つのリスト項目、および通常の「ホーム」「コンテンツ」「約」「連絡先」ページにリンクする4つのアンカータグで構成される基本的なナビゲーションバーが含まれています。

各リンクには、最後の（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の代わりにaに変更すると、動作しません。

私も:last-childを試しましたが、それは同じ結果を持っていますが、liでは動作しますが、ではありません。

EDIT：

はここに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; 
} 

すべてのヘルプは大歓迎されます。兄弟タグのnth-childセレクタ作品

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

ので、liタグにそれを使用するために正しいです：

Answer 1

私はすでにあなたのために働くルールにaセレクタを追加するのに十分だろうと思います。 aセレクタを追加すると、liに含まれているaタグのスタイルを設定すると言います。

最後のセレクタにCSSスタイルが適用されます。以前のものはコンテキスト（またはコンテナ）として機能します。