结合 CSS 伪元素，":after" 和 ":last-child"
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2351623/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Combining CSS Pseudo-elements, ":after" the ":last-child"
提问by Derek
I want to make "grammatically correct" lists using CSS. This is what I have so far:
我想使用 CSS 制作“语法正确”的列表。这是我到目前为止：
The <li>tags are displayed horizontally with commas after them.
该<li>标签与在他们之后逗号水平显示。
li { display: inline; list-style-type: none; }
li { display: inline; list-style-type: none; }
li:after { content: ", "; }
li:after { content: ", "; }
That works, but I want the "last-child" to have a period instead of a comma. And, if possible, I'd like to put "and" before the "last-child" as well. The lists I'm styling are generated dynamically, so I can't just give the "last-children" a class. You can't combine pseudo-elements, but that's basically the effect I want to achieve.
那行得通，但我希望“最后一个孩子”有一个句点而不是逗号。而且，如果可能的话，我还想在“最后一个孩子”之前加上“和”。我正在设计的列表是动态生成的，所以我不能只给“最后一个孩子”一个类。你不能组合伪元素，但这基本上是我想要达到的效果。
li:last-child li:before { content: "and "; }
li:last-child li:before { content: "and "; }
li:last-child li:after { content: "."; }
li:last-child li:after { content: "."; }
How do I make this work?
我如何使这项工作？
回答by Zyphrax
This works :) (I hope multi-browser, Firefox likes it)
这有效:)（我希望多浏览器，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>回答by Gabriel Hautclocq
I do like this for list items in <menu> elements. Consider the following markup:
我很喜欢 <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>
I style it with the following CSS:
我使用以下 CSS 对其进行样式设置：
menu > li {
display: inline;
}
menu > li::after {
content: ' | ';
}
menu > li:last-child::after {
content: '';
}
This will display:
这将显示：
Profile | Options | Logout
And this is possible because of what Martin Atkins explained on his comment
这是可能的，因为马丁阿特金斯在他的评论中解释了
Note that in CSS 2 you would use :after, not ::after. If you use CSS 3, use ::after(two semi-columns) because ::afteris a pseudo-element (a single semi-column is for pseudo-classes).
请注意，在 CSS 2 中，您将使用:after，而不是::after. 如果您使用 CSS 3，请使用::after(两个半列) 因为::after是伪元素（单个半列用于伪类）。
回答by user5341733
An old thread, nonetheless someone may benefit from this:
一个旧线程，但有人可能会从中受益：
li:not(:last-child)::after { content: ","; }
li:last-child::after { content: "."; }
This should work in CSS3 and [untested] CSS2.
这应该适用于 CSS3 和 [未经测试] CSS2。
回答by Derek
You cancombine pseudo-elements! Sorry guys, I figured this one out myself shortly after posting the question. Maybe it's less commonly used because of compatibility issues.
您可以组合伪元素！对不起，伙计们，我在发布问题后不久就自己解决了这个问题。也许由于兼容性问题，它不太常用。
li:last-child:before { content: "and "; }
li:last-child:before { content: "and "; }
li:last-child:after { content: "."; }
li:last-child:after { content: "."; }
This works swimmingly. CSS is kind of amazing.
这很有效。CSS 有点神奇。
回答by Wolfgang Blessen
Just To mention, in CSS 3
顺便提一下，在 CSS 3 中
:after
：后
should be used like this
应该像这样使用
::after
：：后
From https://developer.mozilla.org/de/docs/Web/CSS/::after:
来自https://developer.mozilla.org/de/docs/Web/CSS/::after：
The ::after notation was introduced in CSS 3 in order to establish a discrimination between pseudo-classes and pseudo-elements. Browsers also accept the notation :after introduced in CSS 2.
::after 符号是在 CSS 3 中引入的，目的是在伪类和伪元素之间建立区分。浏览器也接受 :after 在 CSS 2 中引入的符号。
So it should be:
所以应该是：
li { display: inline; list-style-type: none; }
li::after { content: ", "; }
li:last-child::before { content: "and "; }
li:last-child::after { content: "."; }
回答by Matt Wagner
Adding another answer to this question because I needed precisely what @derek was asking for and I'd already gotten a bit further before seeing the answers here. Specifically, I needed CSS that could alsoaccount for the case with exactly two list items, where the comma is NOT desired. As an example, some authorship bylines I wanted to produce would look like the following:
为这个问题添加另一个答案，因为我正是需要@derek 所要求的，而且在看到这里的答案之前，我已经走得更远了。具体来说，我需要CSS，可能还占正好用两个列表项，其中逗号不希望的情况。例如，我想生成的一些作者署名如下所示：
One author:
By Adam Smith.
一位作者：
By Adam Smith.
Two authors:
By Adam Smith and Jane Doe.
两位作者：
By Adam Smith and Jane Doe.
Three authors:
By Adam Smith, Jane Doe, and Frank Underwood.
三位作者：
By Adam Smith, Jane Doe, and Frank Underwood.
The solutions already given here work for one author and for 3 or more authors, but neglect to account for the two author case—where the "Oxford Comma" style (also known as "Harvard Comma" style in some parts) doesn't apply - ie, there should be no comma before the conjunction.
这里已经给出的解决方案适用于一位作者和 3 位或更多作者，但忽略了两位作者的情况——“牛津逗号”风格（在某些部分也称为“哈佛逗号”风格）不适用- 即，连词前不应有逗号。
After an afternoon of tinkering, I had come up with the following:
经过一个下午的修补，我想出了以下几点：
<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>
It displays the bylines as I've got them above.
它显示我在上面得到的署名。
In the end, I also had to get rid of any whitespace between lielements, in order to get around an annoyance: the inline-block property would otherwise leave a space before each comma. There's probably an alternative decent hack for it but that isn't the subject of this question so I'll leave that for someone else to answer.
最后，我还必须去掉li元素之间的任何空格，以解决一个烦恼：否则 inline-block 属性会在每个逗号之前留下一个空格。可能有一个替代的体面黑客，但这不是这个问题的主题，所以我会把它留给其他人来回答。
Fiddle here: http://jsfiddle.net/5REP2/
在这里小提琴：http: //jsfiddle.net/5REP2/
回答by Raj Sharma
To have something like One, two and threeyou should add one more css style
要拥有一、二和三之类的东西，您应该再添加一种 css 样式
li:nth-last-child(2):after {
content: ' ';
}
This would remove the comma from the second last element.
这将从倒数第二个元素中删除逗号。
Complete Code
完整代码
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>回答by user3064058
I am using the same technique in a media query which effectively turns a bullet list into an inline list on smaller devices as they save space.
我在媒体查询中使用了相同的技术，它在较小的设备上有效地将项目符号列表转换为内联列表，因为它们节省了空间。
So the change from:
所以变化来自：
- List item 1
- List item 2
- List item 3
- 列出项目 1
- 列出项目 2
- 列出项目 3
to:
到：
List Item 1; List Item 2; List Item 3.
清单项 1；清单项目 2；列表项 3。
