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

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 {
  /* ... */
}