我尝试在导航栏上添加一个垂直分隔符,但我现在在第一个列表项的开头有一个分隔符,我无法摆脱它。我只想让它看起来像这样:首页|联系
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 -->
答案 0 :(得分:0)
:first-child定义为:
The :first-child CSS pseudo-class represents any element that is the first child element of its parent.
你有a
标记作为父ul
中li
之前的第一个元素(顺便说一下,这是无效的HTML)。
您(应该)可以将其删除,并且您当前的代码可以正常运行:
或者您可以改为使用nth-of-type()
:
#nav li:nth-of-type(1):before {
content: none;
}
或强>
使用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;
}