html - 选择器li + li麻烦

我通常在li + li上使用背景图像在导航菜单上使用一些条子分离器，而我想尝试创建一个没有图像的分离器（可怕的解释）。

我以前在用

#header li + li {
    background: url('http://i.imgur.com/IdVT0cL.png') 8px 8px / 1px 10px no-repeat;
    padding-left: 20px;
}

所以我尝试了

#header li + li {
    background: #00B25C 8px 8px / 1px 10px no-repeat;
    padding-left: 20px;
}

并且突出显示除第一个项目外的所有列表项目。为什么是这样？这是我的JSFiddle：http://jsfiddle.net/yhLLb/

最佳答案

如果我对，您可以使用css'：before-selector来实现分隔符，而无需使用图像：

#navBar li+li:before {
    content: "|";
    /*background: #00B25C 8px 8px / 1px 10px no-repeat;*/
}

看到这个小提琴：http://jsfiddle.net/yhLLb/2/

干杯
弗洛里安

关于html - 选择器li + li麻烦，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21921232/