CSS :before and :first-child combined

Question

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

#navigation_center li:before {

    content: "| ";
    color: #fff;

}

现在我希望第一项前面没有分隔符，所以我想出了以下代码:

#navigation_center li:before:first-child {

    content: none;

}

但这并没有做任何事情。是否可以结合使用 :before 和 :first-child？

Answer 1

尝试

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

编辑:我想用 FelipeAls 的评论来扩展这个答案。原始问题使用的 :first 不是有效的 CSS 选择器。相反，请使用 :first-child。伪选择器的顺序也很重要。第一个子选择器必须先出现。

我倾向于将 :before 视为选择器的一种修饰符。它实际上并没有选择一个元素，只是选择了所选元素之前的空间。