结合 CSS 伪元素，":after" 和 ":last-child"答案

【问题标题】：Combining CSS Pseudo-elements, ":after" the ":last-child"结合 CSS 伪元素，":after" 和 ":last-child"
【发布时间】：2011-01-22 00:54:45
【问题描述】：

我想使用 CSS 制作“语法正确”的列表。这是我目前所拥有的：

<li> 标签水平显示，后面有逗号。

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

li:after { content: ", "; }

这行得通，但我希望“最后一个孩子”有句号而不是逗号。而且，如果可能的话，我也想把“and”放在“last-child”之前。我正在设计的列表是动态生成的，所以我不能只给“最后一个孩子”一个班级。不能组合伪元素，不过这基本上是我想要达到的效果。

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

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

我该如何进行这项工作？

【问题讨论】：

你真的不应该为此使用 css。
我必须同意 Funky Dude 的观点。最好在 HTML 中执行此操作（或者如果它不仅仅是纯 HTML，则在代码隐藏中执行此操作）。 CSS 用于格式化 :)
我……就个人而言，倾向于认为，在列表中，格式是一种很好的方式，而不是必需的。在这种情况下，与使用 html 或服务器端编码相比，使用 CSS 可以更简单地从列表中添加或删除。但我有时会那样奇怪，而且，老实说ymmv等...... =）
并且 +1 使用牛津逗号！ :)
+1 表示“+1 表示牛津逗号”。从来没有听说过（我不是本地人）。但是快速 wiki 查找说这是很自然的，因为它没有在许多语言中使用。有趣的是，人们可以学习堆栈谷歌搜索 CSS 问题 ;)

标签： css

【解决方案1】：

这可行:)（我希望多浏览器，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>

【讨论】：

一个类似的问题是您使用竖线字符分隔菜单项的情况。相同的解决方案有效。但是，最终的内容属性需要设置为 {content:none;} 以消除最终的管道字符。
顺序也很重要。 li:last-child:after 有效，但 li:after:last-child 无效。
请注意:last-child 不属于 CSS3 规范，因此 IE8 及之前的版本不支持。
@Cthulhu “IE8 不支持”是真的，但“不属于 CSS3 规范”不是。
@BobKline 那条评论是 9 年前的，所以可能信息没有更新。

【解决方案2】：

你可以组合伪元素！对不起，伙计们，我在发布问题后不久就自己想出了这个问题。可能由于兼容性问题，它不太常用。

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

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

这很有效。 CSS 有点神奇。

【讨论】：

这有点像“nit-picker's corner”，但“last-child”实际上是一个伪类，而“before”和“after”是伪元素。不同之处在于，伪类是对现有元素的附加约束，而伪元素实际上是表示树中的全新元素，它是在 CSS 而不是 HTML 中生成的。出于这个原因，您可以将它们组合起来：last-child 是 li 上的修饰符，然后在您选择所有 li 元素之后，您可以选择（并隐式创建）一个新元素，然后在每个之后。
我知道你可能早就忘记了这个特定的线程，但是由于你提到你的列表是可变长度的，所以值得指出的是，在大多数情况下，只有两个项目的列表不会用英文逗号正确。换句话说，如果你想要“面包和黄油”。而不是“面包和黄油”。 - 那么这里提供的大多数解决方案都是不完整的。我确实想出了一个解决方法，并将其发布在下面作为答案，以防它帮助任何仍在寻找这个话题的人。

【解决方案3】：

我很喜欢

元素中的列表项。考虑以下标记：

<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 在他的 comment 中解释了这一点

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

【讨论】：

【解决方案4】：

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

所以变化来自：

列表项 1
列表项 2
列表项 3

到：

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

【讨论】：

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

【解决方案5】：

顺便提一下，在 CSS 3 中

:之后

应该这样使用

::之后

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

::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: "."; }

【讨论】：

所有支持双冒号::CSS3语法的浏览器也只支持:语法，但IE 8只支持单冒号，所以目前建议只使用单冒号-冒号以获得最佳浏览器支持。 :: 是一种较新的缩进格式，用于区分伪内容和伪选择器。如果您不需要 IE 8 支持，请随意使用双冒号。从这个article
IE 8 不再是浏览器标准的参与者。不受 Microsoft 支持，也不支持 HTML5 或 CSS3（伪元素、转换等）。我曾经在向后兼容性方面做了大量工作，直到一年前，一直回到 IE6/IE7（通过Modernizr。）我们已经走了很长一段路，如果您打算让您的网站长期展示其在线身份 - 而不会成为短视的解决方案 - 那么只需考虑您将从使用 IE8 的人那里获得的收入。纳达。即使是落后于时代 20 年的老年人，现在也在使用平板电脑和二合一笔记本电脑。

【解决方案6】：

为这个问题添加另一个答案，因为我正是需要 @derek 所要求的，而且在看到这里的答案之前我已经更进一步了。具体来说，我需要的 CSS 也可以说明恰好有两个列表项的情况，其中不需要逗号。例如，我想制作的一些作者署名如下所示：

一位作者： By Adam Smith.

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

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

这里已经给出的解决方案适用于一位作者和三位或更多作者，但忽略了两位作者的情况——“Oxford Comma”风格（在某些部分也称为“Harvard Comma”风格）不适用't apply - 即连词前不应有逗号。

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

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

【讨论】：

【解决方案7】：

一个旧线程，但有人可能会从中受益：

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

这应该适用于 CSS3 和 [未经测试的] CSS2。

【讨论】：

【解决方案8】：

要拥有 一、二和三，您应该再添加一个 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>

【讨论】：