水平 UL 上的垂直分隔线出现问题

Question

我试图在导航栏上添加一个垂直分隔符，但现在我在第一个列表项的开头有一个我无法摆脱的分隔符。我只想让它看起来像这样： 首页 |联系

这是查看问题的网站。提前谢谢你:)

#nav ul {
	margin: 0;
	padding: 0;
}
#nav li {
	display: inline;
	list-style-type: none;
	font-family: 'Open Sans', sans-serif;
	font-size:20px;
	
}
#nav li:before {
content: " | ";
}
#nav li:first-child:before {
content: none;
}

<div id="nav"> <!-- nav open -->
 <ul> <!-- ul open -->
  <li><a class="menu" href="index.html">Home</a></li>
  <li><a class="menu" href="https://dbayliss.typeform.com/to/Jm3wF9">Contact</a></li>
    
</ul> <!-- ul close -->
</div> <!-- nav close -->

Answer 1

：first child定义为：

The :first-child CSS pseudo-class represents any element that is the first child element of its parent.

Bu 你有一个 a 标签作为父ul中的第一个元素，在你的li之前（顺便说一下，这是无效的 HTML）。

您

（应该）可以删除它，并且您当前的代码将起作用：

：第一个孩子示例

或者，您可以改用nth-of-type()：

#nav li:nth-of-type(1):before {
   content: none;
}

NTH_OF_TYPE示例

或

使用 border 属性：

#nav ul {
    margin: 0;
    padding: 0;
}
#nav li {
    display: inline;
    list-style-type: none;
    font-family: 'Open Sans', sans-serif;
    font-size:20px;
    border-right: 1px solid black;
    padding: 0 8px;
}
#nav li:last-child{
    border: none;
}

边框示例