除了:first-child以外，将:before应用于所有子元素

Question

我有一个水平导航，我想使用CSS仅用"|"（竖杠）分隔每个导航项。

HTML

<ul>
    <li>First</li>
    <li>Second</li>
    <li>Third</li>
    <li>Fourth</li>
    <li>Fifth</li>
</ul

现在它看起来是这样的

First   Second   Third   Fourth   Fifth

我希望它看起来像这样

First | Second | Third | Fourth | Fifth

我能够使用 CSS 在每个 <li> 前面加上一个“|”符号。

li:before {
    content:"|";
}

不过结果是：

|  First | Second | Third | Fourth | Fifth

我怎样才能在不将“|”符号添加到第一项的情况下完成这个操作？

- xslibx

Answer 1

您可以使用 :not 伪类。

li:not(:first-child):before {
  content: "|";
}

ul {
  display: flex;
  list-style: none;
}
li:not(:first-child):before {
  content: "|";
  padding: 5px;
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

- Oriol

Answer 2

您可以使用nth-child选择器来选取除了第一个元素之外的所有元素。

li:nth-child(n+2):before {
  /* ... */
}

- jeffjenx

Answer 3

其他选项 :)

li {
  display: inline-block
}
li + li:before {
  content: '|';
}

<ul>
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
  <li>Fourth</li>
  <li>Fifth</li>
</ul>

- G-Cyrillus

Answer 4

除了您当前的规则，还要添加此规则。

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

相信这样做就可以了。

- Katana314

---

伪元素必须位于选择器的末尾：li:first-child:before。 - Oriol

感谢@Katana314提供的想法和@Oriol的纠正 - 在使用:not(:first-child)破坏其他规则的情况下，他们拯救了我 - 请参见此处用于对除第一个标题外的标题进行编号。 - LuH