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视为选择器的一种修饰符。它实际上并不是仅在所选元素之前选择一个元素。

Answer 2

虽然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>

让我们把它分开：

三个div.works位于div
三个div.broken也在div
CSS的第一条规则之前添加了一个“工作”的绿色文本。它通过选择first-child，然后选择它前面的空白区域来实现。
第二条规则在首先出现的每个块之后添加“正在工作”，通过类比，它首先选择不属于first-child定义的每个块，然后选择它们之前的空白区域。 / LI>
以下两条规则，不会找到攻击自己的块。 :before:first-child尝试选择一个空格，但后来测试它是first-child而不是（因为从技术上来说它还没有在DOM树中），类似的问题是{{1} }。

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

2 个答案: