CSS :not(:last-child):after 选择器
Posted
技术标签:
【中文标题】CSS :not(:last-child):after 选择器【英文标题】：CSS :not(:last-child):after selector 【发布时间】：2011-07-23 22:05:55 【问题描述】：我有一个元素列表，其样式如下：
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的定义
【问题讨论】：
这种行为似乎是 Chrome 10 中的一个错误。它适用于我在 Firefox 3.5 中。 实际上刚刚在 2018 年使用最新的 Chrome 运行了 sn-p 并按预期工作。 【参考方案1】：您所写的示例对我来说在 Chrome 11 中完美运行。也许您的浏览器不支持:not() 选择器？
您可能需要使用 javascript 或类似工具来完成此跨浏览器。 jQuery 在其选择器 API 中实现了:not()。
【讨论】：
我通过li:not(:first-child):before 解决了这个问题，并在之前添加了竖线。我正在使用似乎不支持 last-child 的稳定版 Chrome。 Canary 版本可以。谢谢你的回答。
Chrome 好像连 2013 年都不支持？【参考方案2】：
您的示例不适用于我的 IE，您必须在文档中指定 Doctype header 以在 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 会负责兼容性。
【讨论】：
是新的 HTML5 标准。 这是处理这个问题的绝妙而现代的方法。我一直在努力：last-child，然后我找到了你的答案。这个很完美！ :not(:last-of-type):after【参考方案3】：如果是not选择器有问题，可以全部设置并覆盖最后一个
li:after
content: ' |';
li:last-child:after
content: '';
或者如果你可以使用之前，不需要last-child
li+li:before
content: '| ';
【讨论】：
这实际上是让它在 IE8 中运行的唯一方法（抱歉，IE7 和更早版本没有 cheetos）。li:not(:first-child):before 对于旧版本的 Internet Explorer 来说有点太吓人了。【参考方案4】：
一切似乎都是正确的。您可能希望使用以下 css 选择器而不是您使用的选择器。
ul > li:not(:last-child):after
【讨论】：
@ScottBeeson 这是现代浏览器的最佳遮阳篷，但可以接受旧浏览器的答案。 （我同意你的观点，这应该是公认的）【参考方案5】：使用 CSS 的示例
ul li:not(:last-child)
border-right: 1px solid rgba(153, 151, 151, 0.75);
【讨论】：
【参考方案6】：你可以试试这个，我知道不是你要找的答案，但概念是一样的。
您正在为所有孩子设置样式，然后将其从最后一个孩子中删除。
代码片段
li
margin-right: 10px
&:last-child
margin-right: 0
图片
【讨论】：
嗨，请问这个编辑器是什么？看起来不错。 这是一小段代码，任何人都可以轻松记住和输入。【参考方案7】：对我来说效果很好
&:not(:last-child)
text-transform: uppercase;
【讨论】：
这个答案可能与 SCSS 而不是 CSS 有关。 这对我也适用于 Material-UI："&:not(:first-child)": ... styles 【参考方案8】：
删除最后一个孩子之前的 : 和使用的 :after
ul li:not(last-child)
content:' |';
希望它应该工作
【讨论】：
它没有。您还需要在 last-child 前面加一个冒号。【参考方案9】：删除最后一个孩子之前的 : 和使用的 :after
ul > li:not(:last-child):after
border-bottom: none !important;
【讨论】：
以上是关于CSS :not(:last-child):after 选择器的主要内容，如果未能解决你的问题，请参考以下文章
css CSS：not - last-child - nth-child（1） - last-of-type
HwPointEventFilter: do not support AFT because of no config华为手机进入工程菜单