CSS :before 和 :first-child 组合

CSS :before and :first-child combined

提问by Jeffrey

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;

}

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

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

回答by hradac

Try

尝试

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

Edit: I wanted to expand on this answer with comments made by FelipeAls. The original question used :firstwhich 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.

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

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

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

回答by v010dya

Although hradac's answer should do the trick i thought it would be best to run through some possible permutations to help newcommers.

尽管hradac的回答应该可以解决问题，但我认为最好通过一些可能的排列来帮助新人。

.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>

Let's take this apart:

让我们把它分开：

• Three div.worksare inside a div
• Three div.brokenare also inside a div
• The first rule of CSS adds a green text "working " before. It does so by selecting the first-childand then selecting the empty space right before it.
• The second rule adds " is working" after each block that comes after first, by analogy it first selects each block that doesn't fall under the first-childdefinition, and then selects the empty space before them.
• The following two rules, will not find a block to attack themselves to. The :before:first-childattempts to select an empty space, but then tests if it is a first-childand it is not (since technically it's not yet in the DOM tree), the similar problem is with :not(:first-child).

• 三个div.works在一个 div 内
• 三个div.broken也在一个div里面
• CSS 的第一条规则在之前添加了绿色文本“working”。它通过选择first-child，然后选择它之前的空白区域来实现。
• 第二条规则在第一个之后的每个块之后添加“正在工作”，以此类推，它首先选择每个不属于first-child定义的块，然后选择它们之前的空白空间。
• 下面两条规则，就不会找块来攻击自己了。在:before:first-child尝试选择一个空的空间，但随后测试它是否是一个first-child，它不是（因为在技术上它尚未在DOM树），类似的问题是:not(:first-child)。