水平UL上的垂直分隔器问题

Question

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

Here是查看问题的网站。先感谢您 ：）

#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.

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

您（应该）可以将其删除，并且您当前的代码可以正常运行：

:FIRST-CHILD EXAMPLE

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

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

NTH_OF_TYPE EXAMPLE

或

使用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;
}

BORDER EXAMPLE