Question

我常常在我的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/

Answer 1

如果我找到了你，你可以使用css'：before-selector来实现一个不使用图像的分隔符：

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

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

干杯弗洛里安

Answer 2

您的问题的答案，为什么突出显示除第一个之外的所有列表项，可以通过CSS相邻选择器的规范来解释。 http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors

因此，以下规则表明当P元素立即出现时   跟随一个MATH元素，它不应该缩进：

math + p {text-indent：0}

这个小提琴突出了所有的菜单项，不确定这是否是你想要实现的，因为#navBar li就足够了，没有必要选择相邻的元素？ http://jsfiddle.net/yhLLb/1/

即

#navBar li, #navBar li + li {
    background: #00B25C 8px 8px / 1px 10px no-repeat;
}

与

相同

#navBar li {
    background: #00B25C 8px 8px / 1px 10px no-repeat;
}

Answer 3

这是你可以做到的另一种方式。

HTML

    <div id="navBar">
    <ul>
        <li>Home</li>
        <li>Portfolio</li>
        <li>Contact</li>
        <li class="last">About</li>
    </ul>
    </div>

的CSS

#navBar {
    margin-right: 20px;
    background: #3840F8;
    float: right;
    line-height: 40px;
    overflow: hidden;
    height: 40px;
}
#navBar ul {
    padding-left: 20px;
    padding-right: 20px;
}
#navBar li {
    text-align: center;
    border-right: 1px solid #888;
    padding: 0 10px;
    line-height: 10px;
    float: left;
    list-style: none;
    color: #fff;
}
#navBar li.last {
     border-right: none;
}

JSFiddle

选择器li + li麻烦

3 个答案: