html - 使用 li + li 作为导航分隔符会清除第一项后的 背景

Question

我正在使用 a 进行水平导航，感谢问题:Separators For Navigation ，我读到了使用 li + li 设置基于图像的元素分隔符的好方法。 (伪？)选择器。

在我的代码中，我为 <li> 定义了一个背景图像。标签，但是一旦我添加了 li + li代码，分隔符出现了，但是所有的背景li第一个标签消失后。如果我删除 #nav-items li+li代码，所有元素的背景恢复(但显然我没有分隔符)

(截图)

我的代码是这样的:

<ul id="nav-items">
  <li class="nav-item"><a href="#" title="Home">Home</a></li>
  <li class="nav-item"><a href="#" title="About Us">About Us</a></li>
  etc...
</ul>

和我的CSS:

#nav-items {
    list-style-type: none;
}

.nav-item {
    display: list-item; 
    float:left;
    width: 150px;
    height: 39px;
    background: url('../images/top-nav-bg.png');
    background-repeat: repeat-x;
    padding: 9px 20px;
    color: #fff;
    font-family: 'Oxygen', sans-serif;
    letter-spacing: 1px;
    font-weight: 300;
}

#nav-items li+li {
    background:url('../images/top-nav-separator.png') no-repeat top left; 
}

我做错了什么？

Answer 1

#nav-items li+li:before{
    background:url('../images/top-nav-separator.png') no-repeat top left; 
    content:"";
    position:absolute;
    left:0;
    top:0;
    display:block;
    width:3px   /* your image width */
    height:57px   /* your image height */
}