CSS:not(:last-child):选择器之后


368

我有一个元素列表,其样式如下:

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()选择器的定义


1
这种现象似乎是Chrome 10中的错误。它在Firefox 3.5中适用于我。
2011年

6
实际上只是在2018年使用最新的Chrome浏览器运行了代码段,并按预期工作。
atoth

Answers:


433

如果不是选择器有问题,则可以设置所有选择器并覆盖最后一个选择器

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

或者如果您可以使用之前,则不需要最后一个孩子

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

12
实际上,这是使它可以追溯到IE8的唯一方法(对不起,对于IE7和更早版本没有任何帮助)。 li:not(:first-child):before对于旧版本的Internet Explorer来说有点令人恐惧。
桑迪·吉福德

239

一切似乎都是正确的。您可能要使用以下css选择器代替您使用的选择器。

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

4
@ScottBeeson这是现代浏览器的最佳遮篷,但在旧浏览器上可以接受。(我同意您的意见,应该接受这一点)
Arthur

25

您撰写的示例对我来说在Chrome 11中非常适用。也许您的浏览器不支持:not()选择器?

您可能需要使用JavaScript或类似工具才能完成此跨浏览器。jQuery 在其选择器API中实现:not()


8
我通过li:not(:first-child):before添加之前的竖线解决了这个问题。我使用的是Chrome的稳定版本,该版本似乎不支持最后一个孩子。Canary版本可以。感谢您的回答。
马特·克拉克森

似乎Chrome甚至在2013年都不支持它?
MikkoP



10

对于我而言,您的示例无法在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 3选择器

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将解决兼容性问题。


6
<!DOCTYPE html>是新的HTML5标准。
马特·克拉克森

1
这是一种很棒的现代方法。我当时正与:last-child苦苦挣扎,然后找到了答案。这是完美的!:not(:last-of-type):after
Firze '16

1

删除最后一个孩子之前的:和后面的:after

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

希望它应该能工作


-2

您可以尝试一下,我知道不是您要找的答案,但是概念是相同的。

您在哪里为所有子项设置样式,然后从最后一个子项中删除样式。

代码段

li
  margin-right: 10px

  &:last-child
    margin-right: 0

图片

在此处输入图片说明


2
嗨,请问这个编辑器是什么?看起来很好。
Zanecat

这是一小段代码,任何人都可以轻松记住并键入它。
Yashu Mittal,
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.