CSS :not(:last-child):after 选择器

2022-01-10 00:00:00 css-selectors pseudo-element css

我有一个元素列表，其样式如下:

I have a list of elements, which are styled like this:

ul {
    list-style-type: none;
    text-align: center;
}

li {
    display: inline;
}

li:not(:last-child):after {
    content:' |';
}

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
</ul>

输出 一个 |二 |三 |四 |五个 | 而不是 一个 |二 |三 |四 |五

有人知道如何通过 CSS 选择除最后一个元素之外的所有元素吗?

Anyone know how to CSS select all but the last element?

可以看到:not()选择器的定义这里

推荐答案

如果是not选择器有问题，可以全部设置，覆盖最后一个

If it's a problem with the not selector, you can set all of them and override the last one

li:after
{
  content: ' |';
}
li:last-child:after
{
  content: '';
}

或者如果你可以使用之前，不需要last-child

or if you can use before, no need for last-child

li+li:before
{
  content: '| ';
}

相关文章