：除了以下所有孩子之前：第一个孩子

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

如何在不添加“|”的情况下执行此操作第一项？

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>

Answer 2

您可以使用第n个子选择器来定位第一个

之后的所有元素

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

Answer 3

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

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

很确定会这样做。

Answer 4

其他选择：）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;