结合CSS伪元素，“：after”，“：last-child”

122

我想使用CSS列出“语法正确”的列表。这是我到目前为止的内容：

该<li>标签与在他们之后逗号水平显示。

li { display: inline; list-style-type: none; }

li:after { content: ", "; }

那行得通，但是我希望“最后一个孩子”使用句号而不是逗号。而且，如果可能的话，我也想在“最后一个孩子”之前加上“和”。我正在设置样式的列表是动态生成的，所以我不能只给“最后一个孩子”一个类。您不能组合伪元素，但这基本上是我想要实现的效果。

li:last-child li:before { content: "and "; }

li:last-child li:after { content: "."; }

我该如何工作？

css

— 德里克
source

4

您真的不应该为此使用CSS。

— 时髦的家伙

2

我必须有点同意Funky Dude。最好在HTML中执行此操作（如果不是普通HTML，则在代码后面进行编码）。CSS用于格式化:)

— Zyphrax

16

我...个人而言，倾向于争辩说，在列表中，格式化是一件好事，而不是必需品。与使用html或服务器端编码相比，使用CSS允许从列表中进行更简单的添加或删除。但是我很奇怪，有时候，老实说，ymmv，等等……=）

— 大卫说恢复莫妮卡（Monica

9

+1即可使用牛津逗号！：）

— 布兰登·罗兹

5

+1代表“牛津逗号+1”。从来没有听说过（我不是本地人）。但是快速的Wiki查找说这很自然，因为许多语言都没有使用它。有趣的是，什么人可以学习堆叠式CSS问题；）

— jakub.g 2012

168

这有效:)（我希望多浏览器，Firefox喜欢它）

li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }

<html>
  <body>
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </body>
</html>

展开摘要

— Zyphrax
source

2

类似的问题是您用管道字符分隔菜单项的情况。相同的解决方案有效。但是，最终的content属性需要设置为{content：none;}，以消除最终的管道字符。

— 2011年

2

秩序也很重要。li:last-child:after有效，但li:after:last-child无效。

— 理查德·阿约特

1

请记住，:last-child这不属于CSS3规范，因此IE8和早期版本不支持它。

— 克苏鲁2012年

23

我喜欢<menu>元素中的列表项。考虑以下标记：

<menu>
  <li><a href="/member/profile">Profile</a></li>
  <li><a href="/member/options">Options</a></li>
  <li><a href="/member/logout">Logout</a></li>
</menu>

我使用以下CSS设置样式：

menu > li {
  display: inline;
}

menu > li::after {
  content: ' | ';
}

menu > li:last-child::after {
  content: '';
}

这将显示：

Profile | Options | Logout

这是有可能的，因为马丁·阿特金斯（Martin Atkins）在他的评论中做了解释

请注意，在CSS 2中将使用:after，而不是::after。如果您使用CSS 3，请使用::after（两个半列），因为它::after是一个伪元素（单个半列用于伪类）。

— 加布里埃尔·豪克洛克（Gabriel Hautclocq）
source

16

一个旧线程，尽管如此，还是有人可以从中受益：

li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }

这应该在CSS3和[unested] CSS2中起作用。

— 用户5341733
source

11

您可以组合伪元素！抱歉，我在发布问题后不久就想到了这个问题。也许由于兼容性问题，它不太常用。

li:last-child:before { content: "and "; }

li:last-child:after { content: "."; }

这工作得很顺利。CSS很棒。

— 德里克
source

12

这有点像“ nit-picker的角落”，但是“ last-child”实际上是伪类，而“ before”和“ after”是伪元素。不同之处在于，伪类是对现有元素的附加约束，而伪元素实际上是表示树中以CSS而不是HTML生成的全新元素。您可以出于以下原因合并这些元素：last-child是上的修饰符li，然后在选择了所有li最后一个子元素之后，然后在每个元素之前和之后选择（并隐式创建）一个新元素。

— 马丁·阿特金斯

我知道您可能早就忘记了该特定线程，但是由于您提到列表的长度是可变的，因此需要指出的是，在大多数情况下，仅包含两个项目的列表用英语逗号是不正确的。换句话说，如果您想要“面包和黄油”。而不是“面包和黄油”。-那么这里提供的大多数解决方案都是不完整的。我确实想出了一种解决方法，并将其发布在下面作为答案，以防它帮助仍在线程中遥遥领先的任何人。

— 马特·瓦格纳

6

只是在CSS 3中

：后

应该这样使用

：：后

从https://developer.mozilla.org/de/docs/Web/CSS/::after：

为了在伪类和伪元素之间建立区别，在CSS 3中引入了:: after表示法。浏览器也接受表示法：CSS 2中引入之后。

所以应该是：

li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }

— 沃尔夫冈·布莱森
source

3

每个支持双冒号::CSS3语法的浏览器也仅支持该:语法，但是IE 8仅支持单冒号，因此，目前，建议仅使用单冒号以获得最佳的浏览器支持。::是缩进的新格式，用于区分伪内容和伪选择器。如果不需要IE 8支持，请随时使用双冒号。来自本文

— JohnnyQ '16

2

IE 8不再是浏览器标准的播放器。微软不支持，也不支持HTML5或CSS3（伪元素，转换等），直到一年前，我一直在进行向后兼容性方面的大量工作，一直回溯到IE6 / IE7（通过我们已经走了很长一段路，如果您打算让您的网站长期展示其在线身份-而不是成为一个短视解决方案-那么只需考虑您将从使用IE8的用户那里获得的收入。娜达即使是比现在落后20年的老年人，现在也正在使用平板电脑和二合一笔记本电脑。

— 史蒂文·文蒂米利亚

2

为这个问题添加另一个答案，因为我确实需要@derek的要求，并且在这里看到答案之前我已经走了一些距离。具体来说，我需要CSS，它也可以用两个列表项来说明这种情况，其中不需要逗号。例如，我想制作的一些作者身份标记如下所示：

一位作者： By Adam Smith.

两位作者： By Adam Smith and Jane Doe.

三位作者： By Adam Smith, Jane Doe, and Frank Underwood.

这里已经给出的解决方案适用于一位作者和3位或更多位作者，但忽略了两位作者的情况-“牛津逗号”样式（在某些部分中也称为“哈佛逗号”样式）不适用-即，在连词之前不应包含逗号。

经过一个下午的修补，我想到了以下几点：

<html>
 <head>
  <style type="text/css">
    .byline-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .byline-list > li {
      display: inline;
      padding: 0;
      margin: 0;
    }
    .byline-list > li::before {
      content: ", ";
    }
    .byline-list > li:last-child::before {
      content: ", and ";
    }
    .byline-list > li:first-child + li:last-child::before {
      content: " and ";
    }
    .byline-list > li:first-child::before {
      content: "By ";
    }
    .byline-list > li:last-child::after {
      content: ".";
    }
  </style>
 </head>
 <body>
  <ul class="byline-list">
   <li>Adam Smith</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li>
  </ul>
  <ul class="byline-list">
   <li>Adam Smith</li><li>Jane Doe</li><li>Frank Underwood</li>
  </ul>
 </body>
</html>

当我在上面看到它们时，它会显示标记。

最后，我还必须摆脱li元素之间的任何空格，以消除烦恼：inline-block属性否则将在每个逗号之前保留一个空格。可能有一个不错的替代方法，但这不是此问题的主题，因此我将其留给他人回答。

在这里提琴：http : //jsfiddle.net/5REP2/

— 马特·瓦格纳
source

2

要具有类似“ 一，二和三”的功能，您应该再添加一种CSS样式

li:nth-last-child(2):after {
    content: ' ';
}

这会从倒数第二个元素中删除逗号。

完整的代码

li {
  display: inline;
  list-style-type: none;
}

li:after {
  content: ", ";
}

li:nth-last-child(2):after {
  content: '';
}

li:last-child:before {
  content: " and ";
}

li:last-child:after {
  content: ".";
}

<html>

<body>
  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>
</body>

</html>

展开摘要

— 拉吉·沙玛（Raj Sharma）
source

0

我在媒体查询中使用了相同的技术，可以在较小的设备上有效地将项目符号列表转换为嵌入式列表，因为它们可以节省空间。

所以从以下更改：

清单项目1
清单项目2
清单项目3

至：

列出项目1；列出项目2；清单项目3。

— 用户名
source

他正在尝试使用CSS做到这一点。您的方法是硬编码的HTML。此方法通常用于显示导航。

— Sparatan117