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

我有一个元素列表，它的样式是这样的:

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>

输出One | Two | Three | Four | Five |而不是One | Two | Three | Four | Five

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

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

631694 次浏览
小开

你写的例子在Chrome 11完美地为我工作。也许你的浏览器不支持:not()选择器?

您可能需要使用JavaScript或类似的工具来实现这种跨浏览器的功能。jQuery在它的selector API中实现了:不()。

小开

你的示例在IE中不能为我工作，你必须在你的文档中指定Doctype头以在IE中使用content CSS属性的标准方式渲染你的页面:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<html>


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


</html>

第二种方法是使用css3选择器

li:not(:last-of-type):after
{
content:           " |";
}

但是您仍然需要指定Doctype

第三种方法是使用JQuery和一些脚本，如下所示:

<script type="text/javascript" src="jquery-1.4.1.js"></script>
<link href="style2.css" rel="stylesheet" type="text/css">
</head>
<html>


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


<script type="text/javascript">
$(document).ready(function () {
$("li:not(:last)").append(" | ");
});
</script>

第三种方法的优点是你不需要指定文档类型，jQuery将负责兼容性。

小开
最佳答案

如果not选择器有问题，你可以设置所有的选项并覆盖最后一个选项

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

或者如果你可以使用before，不需要最后一个孩子

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

一切似乎都是正确的。您可能希望使用以下css选择器而不是您使用的。

ul > li:not(:last-child)::after
小开

一个使用CSS的例子

  ul li:not(:last-child){
border-right: 1px solid rgba(153, 151, 151, 0.75);
}
小开

你可以试试这个，我知道这不是你想要的答案，但概念是一样的。

你正在为所有的子元素设置样式，然后从最后一个子元素中移除它。

代码片段

li
margin-right: 10px


&:last-child
margin-right: 0

图像

enter image description here

小开

对我来说很好

&:not(:last-child){
text-transform: uppercase;
}
小开

删除last-child之前的:和used之后的:

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

希望它能起作用

小开

删除last-child之前的:和used之后的:

ul > li:not(:last-child):after {
border-bottom: none !important;
}

提交答案