使用：仅在某些div后

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

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

来源

2013-12-09 Yamaha32088

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

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

来源

2013-12-09 04:25:51 myajouri

完美得多容易谢谢！ – Yamaha32088

非唯一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/

来源

2013-12-09 04:29:46 Blender

使用：仅在某些div后

回答

相关问题