CSS：不是（：最后一个孩子）：在select器之后
我有一个元素列表：
<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Four</li> <li>Five</li> </ul> 和这样的风格：
ul { list-style-type: none; text-align: center; } li { display: inline; } li:not(:last-child):after { content:' |'; }
输出One | Two | Three | Four | Five | One | Two | Three | Four | Five | 而不是One | Two | Three | Four | Five One | Two | Three | Four | Five
任何人都知道如何select除了最后一个元素的所有元素？
你可以在这里看到:not()select器的定义
如果这是不是select器的问题，你可以设置它们，并覆盖最后一个
li:after { content: ' |'; } li:last-child:after { content: ''; }
或者如果以前可以使用，则不需要最后一个孩子
li+li:before { content: '| '; }
每件事似乎都是正确的 你可能想使用下面的CSSselect器，而不是你使用的。
ul > li:not(:last-child):after
你写的例子在Chrome 11中完全适用于我。 也许你的浏览器不支持:not()select器？
您可能需要使用JavaScript或类似的工具来完成这个跨浏览器。 jQuery在其select器API中实现：not（） 。
您的示例在IE中不起作用，您必须在文档中指定Doctype标头才能在IE中以标准方式呈现您的页面以使用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>
第二种方法是使用CSS 3select器
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>
第三种方法的好处是你不必指定doctype，jQuery将兼顾兼容性。
一个使用CSS的例子
ul li:not(:last-child){ border-right: 1px solid rgba(153, 151, 151, 0.75); }
