Question

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

<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;
}

Answer 2

非唯一id属性不是有效的HTML，因此您的id属性应该是一个类。另外，为了实用性，您可能希望使用比嵌套<div>更好的元素来标记菜单：

<ul id="topNavLinks">
    <li><a href="#">Sign In</a></li>
    <li><a href="#">My Account</a></li>
    <li><a href="#">Wish List</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

现在，您可以使用CSS3 :not(:last-child)选择器过滤掉最后一个元素：

#topNavLinks {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#topNavLinks > li {
    display: inline-block;
}

#topNavLinks > li:not(:last-child):after { 
    content: "|";
    padding: 0 .5em; 
}

演示：http://jsfiddle.net/tTTdp/

使用：仅在某些div之后

2 个答案: