问答中心分类: CSSCSS :not(:last-child):after 选择器
0
匿名用户 提问 22分钟 前

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

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
任何人都知道如何 CSS 选择除最后一个元素之外的所有元素吗?
你可以看到的定义:not()选择器这里

duri 回复 22分钟 前

这种行为似乎是 Chrome 10 中的一个错误。它在 Firefox 3.5 中适用于我。

duri 回复 22分钟 前

实际上只是在 2018 年使用最新的 Chrome 运行了该代码段并按预期工作。

7 Answers
0
Vivek 回答 22分钟 前

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

ul > li:not(:last-child):after
Arthur 回复 22分钟 前

@ScottBeeson 这是现代浏览器的最佳遮阳篷,但可以接受旧浏览器的答案。 (我同意你的观点,这应该是公认的)

0
Ashad Nasim 回答 22分钟 前

对我来说它工作正常

&:not(:last-child){
            text-transform: uppercase;
        }
Chris Walsh 回复 22分钟 前

这个答案可能与 SCSS 而不是 CSS 有关。

James Hooper 回复 22分钟 前

这也适用于 Material-UI:"&:not(:first-child)": { ... styles }

0
Liza Daly 回答 22分钟 前

您所写的示例对我来说在 Chrome 11 中完美运行。也许您的浏览器不支持:not()选择器?
您可能需要使用 JavaScript 或类似工具来完成此跨浏览器。 jQuery 实现:不是()在其选择器 API 中。

Matt Clarkson 回复 22分钟 前

我通过这样做解决了这个问题li:not(:first-child):before并在之前添加竖线。我正在使用似乎不支持 last-child 的稳定版 Chrome。 Canary 版本可以。谢谢你的回答。

MikkoP 回复 22分钟 前

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

0
Lorena Pita 回答 22分钟 前

使用 CSS 的示例

ul li:not(:last-child){
        border-right: 1px solid rgba(153, 151, 151, 0.75);
    }
0
Martin Kunc 回答 22分钟 前

您的示例不适用于我的 IE,您必须指定文档类型标题在您的文档中以标准方式在 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>

第二种方法是使用 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 将负责兼容性。

Matt Clarkson 回复 22分钟 前

是新的 HTML5 标准。

Firze 回复 22分钟 前

这是处理这个问题的绝妙而现代的方法。我一直在努力:last-child,然后我找到了你的答案。这个很完美! :not(:last-of-type):after