html – ：除了以下所有孩子之外：第一个孩子

发布时间：2020-12-14 18:43:55 所属栏目：资源来源：网络整理

我有一个水平导航.我正在尝试用“|”分隔每个导航项(管道)仅使用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

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

您可以使用 :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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!