CSS：before和：first-child组合 [英] CSS :before and :first-child combined

问题描述

我正在使用以下代码在菜单项之间添加分隔符：

I'm using the following code to add separators between my menu items:

#navigation_center li:before {

    content: "| ";
    color: #fff;

}

现在我希望第一个项目中没有分隔符它的前面，所以我找出了以下代码：

Now I want the first item not to have a separator in front of it, so I figured out the following code:

#navigation_center li:before:first-child {

    content: none;

}

但这没做任何事情。可以结合使用：before和：first-child吗？

but that's not doing anything. Is it possible to combine :before and :first-child?

推荐答案

尝试

#navigation_center li:first-child:before {
    content: '';
}

编辑：我想扩展这个答案并附有FelipeAls的评论。最初的问题使用了：first ，它不是有效的CSS选择器。而是使用：first-child 。伪选择器的顺序也很重要。第一个子选择器必须排在最前面。

Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :first which is not a valid CSS selector. Instead, use :first-child. Also the order of the pseudo-selectors is important. The first child selector must come first.

我倾向于认为：before 是对选择器。实际上，它不会只选择元素之前的空格。

I tend to think of :before as a kind of modifier to a selector. It does not actually select an element only the space just before the selected element.

这篇关于CSS：before和：first-child组合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！