：nth-​​child没有使用锚标签

Question

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

标题包含一个基本导航栏，其中包含一个无序列表，四个列表项和四个锚标签，这些标签链接到普通家庭＆＃39; ＆＃39;内容＆＃39;＆＃39;约＆＃39; ＆＃39;接触＆＃39;页。

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

以下是代码：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

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

    <!--		<HEADER NAVBAR>		-->
    <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>
    <!--		</HEADER NAVBAR		-->

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

＆＃13;

＆＃13;

＆＃13;

此代码按预期工作。

我想要做的是将样式方面移动到锚标记。

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

我也试过了:last-child，但它有相同的结果，适用于li但不适用于。

修改

这里是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个a中包含的li标记的样式。

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