如何删除第一个导航菜单分隔符

Question

我似乎无法从导航中删除第一个导航菜单分隔符 (small-black-heart-md.png)。除第一个图像外，所有图像都显示在正确的位置。它出现在第一个列表项 "Our Story" 之前。我试过使用伪元素 nav li:first-child:before {display:none;} 但我没有得到任何结果。非常感谢帮助。这个问题让我很困惑，我似乎无法在网上找到明确的答案。感谢您帮助菜鸟！ :)

这是我的CSS：

.banner {
background-image: url("images/navimages/topimage.jpg");
padding: 108px 200px;
}

* {
padding:0;
margin:0;
}

body {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-color: #C4EDFF;
    font-family: 'Tangerine', serif;
    text-align: center;
}

p {
font-family: Arial;
font-size: 14px;
text-shadow: 1px 1px 1px #aaa;
text-align: left; 
}

nav li {
text-shadow: 5px 5px 5px #aaa; 
background-image: url(images/navimages/small-black-heart-md.png);
background-repeat: no-repeat;
padding-left: 40;
padding-right: 40;
font-size: 40px;
font-weight: bold;
display: inline;
}

li a {
color: gray;
text-decoration: none;
}

audio {
width: 640px;
}

a:hover {
color: black;
}

这是我的HTML：

<head>
<head>
<title>The Big Day</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
<body>
<header class="banner"></header>

<nav>
<ul>
<li><a href="ourstory.html">Our Story</a></li>
<li><a href="photos.html">Photos</a></li>
<li><a href="details.html">Details</a></li>
<li><a href= "wishlist.html">Wish List</a></li>
<li><a href= "index.html">Home</a></li>
</ul>
</nav>

<BR><BR><BR>

<div style=" 
padding: 60px;
margin-left: auto;
margin-right: auto; 
height: 400px; 
width: 620px;
border: 10px double; 
text-align: left;
box-shadow: 10px 10px 5px #888888;">
<p>Content here...</p></div>
</body>
</head>
</html>

Answer 1

只需使用：

nav li:first-child{
    background:none;
}

如何删除第一个导航菜单分隔符

How to remove the first nav menu divider

html

css

menu

navigation

separator