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

时间:2011-03-27 14:31:53

标签: css css-selectors pseudo-element

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

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()选择器here

的定义

8 个答案:

答案 0 :(得分:386)

如果not选择器出现问题,您可以设置所有选项并覆盖最后一个

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

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

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

答案 1 :(得分:202)

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

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

答案 2 :(得分:25)

您写的示例在Chrome 11中完全适用于我。也许您的浏览器不支持:not()选择器?

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

答案 3 :(得分:15)

使用CSS

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

答案 4 :(得分: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会兼顾兼容性。

答案 5 :(得分:10)

对我来说,它工作正常

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

答案 6 :(得分:1)

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

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

希望它应该能工作

答案 7 :(得分:-2)

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

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

代码段

li
  margin-right: 10px

  &:last-child
    margin-right: 0

图片

enter image description here