css - 使用 :after only on certain divs

Question

我正在尝试显示 | 管道字符以分隔我页面上的链接。但问题是它们都有相同的类，如果我将它应用于类，它们都会得到管道，这很好，除了最后一个。我能够抵消这种情况的唯一方法是将我需要的那些应用到一个 id，除了它对所有这些都具有相同的 id，所以它是不合适的。另一种解决方法是在同一个类中使用除最后一个之外的所有样式，并将样式复制到新类中，但这似乎也很愚蠢。有没有一种简单的方法可以完成我正在寻找但我忽略的事情？

<div id="topNavLinks">
    <div class="topNavLinksButton">Sign In</div>
    <div class="topNavLinksButton" id="after" >My Account</div>
    <div class="topNavLinksButton" id="after" >Wish List</div>
    <div class="topNavLinksButton" id="after" >About Us</div>
    <div class="topNavLinksButton" id="after" >Contact Us</div>
</div>

CSS:

#after:after { 
    content: "|";
    padding: 0 .5em; 
}

预期输出:

Sign In | My Account | Wish List | About Us | Contact Us

不是:

Sign In | My Account | Wish List | About Us | Contact Us |

Answer 1

您可以选择使用:.topNavLinksButton:not(:last-child):after

.topNavLinksButton:not(:last-child):after {
    content: "|";
    padding: 0.5em;
}