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

发布于 2024-10-27 04:54:44 字数 744 浏览 7 评论 0原文

我有一个元素列表，其样式如下：

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 |两个 |三|四 |五 | 而不是 一 |两个 |三|四 | 5

有人知道如何用 CSS 选择除最后一个元素之外的所有元素吗？

您可以在此处查看 :not() 选择器的定义

原文

I have a list of elements, which are styled like this:

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>

Anyone know how to CSS select all but the last element?

You can see the definition of the :not() selector here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

左岸枫 2024-11-03 04:54:44

如果是 not 选择器的问题，您可以设置所有这些并覆盖最后一个

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

，或者如果您可以使用 before，则不需要最后一个子项

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

If it's a problem with the not selector, you can set all of them and override the last one

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

or if you can use before, no need for last-child

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

回复收藏 0 原文

把梦留给海 2024-11-03 04:54:44

每件事看起来都是正确的。您可能想使用以下 css 选择器而不是您所使用的。

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

Every things seems correct. You might want to use the following css selector instead of what you used.

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

回复收藏 0 原文

无力看清 2024-11-03 04:54:44

对我来说效果很好

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

For me it work fine

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

回复收藏 0 原文

木落 2024-11-03 04:54:44

您所写的示例在 Chrome 11 中对我来说完美运行。也许您的浏览器不支持 :not() 选择器？

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

回复收藏 0 原文

断爱 2024-11-03 04:54:44

使用 CSS 的示例

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

An example using CSS

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

回复收藏 0 原文

梦纸 2024-11-03 04:54:44

您的示例在 IE 中对我来说不起作用，您必须在文档中指定 Doctype header 才能在 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将采取照顾兼容性。

Your sample does not work in IE for me, you have to specify Doctype header in your document to render your page in standard way in IE to use the content CSS property:

<!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>

Second way is to use CSS 3 selectors

li:not(:last-of-type):after
{
    content:           " |";
}

But you still need to specify Doctype

And third way is to use JQuery with some script like following:

<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>

Advantage of third way is that you dont have to specify doctype and jQuery will take care of compatibility.

回复收藏 0 原文

神也荒唐 2024-11-03 04:54:44

删除最后一个孩子之前的 : 和 :after 并使用

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

希望它应该可以工作

Remove the : before last-child and the :after and used

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

Hopefully,it should work

回复收藏 0 原文

百合的盛世恋 2024-11-03 04:54:44

删除最后一个孩子之前的 : 和 :after 并使用

ul > li:not(:last-child):after {
   border-bottom: none !important;
}

Remove the : before last-child and the :after and used

ul > li:not(:last-child):after {
   border-bottom: none !important;
}

回复收藏 0 原文

~没有更多了~

关于作者

源来凯始玺欢你

暂无简介

文章

26 人气

关注发私信

Promise

文章 0 评论 0

关注

qq_lbRlsh

文章 0 评论 0

关注

待＂谢繁草

文章 0 评论 0

关注

yy2010hell

文章 0 评论 0

关注

漫无边际

文章 0 评论 0

关注

傲娇萝莉攻

文章 0 评论 0

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（8）

关于作者

相关话题

热门标签

推荐作者

Promise

qq_lbRlsh

待＂谢繁草

yy2010hell

漫无边际

傲娇萝莉攻

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。