CSS：之前和：第一个孩子合并

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

#navigation_center li:before { content: "| "; color: #fff; } 

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

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

但是这没有做任何事情。 是否可以结合：之前和：第一个孩子？

Answer 1

尝试

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

编辑 ：我想扩大与FelipeAls的评论这个答案。 使用的原始问题:first不是有效的CSSselect器。 相反，使用:first-child 。 伪select器的顺序也很重要。 第一个孩子select器必须先来。

我倾向于认为:before作为select器的一种修饰语。 它实际上并没有select一个元素，而只是选定元素之前的空间。

Answer 2

虽然hradac的答案应该做的伎俩，我认为最好是通过一些可能的排列来帮助newcommers。

 .works:first-child:before { color: green; content: 'working '; } .works:not(:first-child):after { color: green; content: ' is working'; } .broken:before:first-child { color: red; content: 'this will never show up'; } .broken:after:not(:first-child) { color: red; content: 'and this will not show up either'; } 

 works: <div> <div class='works'> something </div> <div class='works'> something </div> <div class='works'> something </div> </div> <hr/> broken: <div> <div class='broken'> something </div> <div class='broken'> something </div> <div class='broken'> something </div> </div>