组合 CSS 伪元素，“ :”之后的“ : last-child”

我想使用 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: "."; }

我该怎么做？

227112 次浏览
小开

这个工作原理:)(我希望多浏览器，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>

小开

您的 可以组合伪元素！不好意思，伙计们，这个问题发布后不久我就自己想出来了。可能是因为兼容性问题，它不太常用。

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

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

这个工作流畅。 CSS 是一种惊人的。

小开

我非常喜欢 < 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

这是可能的，因为马丁阿特金斯解释了他的 评论

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

小开

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

所以变化来自:

  • 列出第一项
  • 列出第二项
  • 列出第三项

致:

列表项目1; 列表项目2; 列表项目3。

小开

顺便提一下，在 CSS3中

: 之后

应该像这样使用

: 之后

来自 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: "."; }
小开

为这个问题添加另一个答案，因为我需要确切地知道@derek 想要什么，而且在看到这里的答案之前，我已经进一步了解了一些。具体来说，我需要的 CSS，可以 还有帐户的情况下正好两个列表项，其中逗号是不希望的。作为一个例子，我想要生成的一些署名文字如下:

一位作者说: By Adam Smith.

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

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

这里已经给出的解决方案适用于一个作者和三个或三个以上的作者，但是忽略了考虑两个作者的情况 & # 8212; 其中“牛津逗号”风格(在某些地方也被称为“哈佛逗号”风格)不适用-即，在连词之前不应该有逗号。

经过一个下午的修修补补，我想出了以下主意:

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

小开

尽管如此，有些人可能会从中受益:

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

这应该可以在 CSS3和[未经测试]的 CSS2中使用。

小开

为了拥有像 一，二，三这样的东西，你应该再添加一个 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>


提交答案