制作 inline/horizontal 列表 -- 倒数第二个问题 child

Question

[我见过很多类似的问题，但这些解决方案在这里不起作用]

我正在制作一个内联列表，它应该是这样的（取决于项目的数量）：

第一个例子：苹果。 第二个例子：苹果和橙子。 第三个例子：苹果、橙子和芒果。

这个CSS可以：

.fruits {font-weight: bold; color: #999999}
.fruits ul {display: inline; padding: 0}
.fruits li {display: inline}
.fruits li:after {content: ", ";}
.fruits li:last-child:after {content: ".";}

HTML是这样的：

<div class="fruits">
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Mangos</li>
</ul>
</div>

第n-2child后的逗号需要去掉，换成'and'.

但我无法完成以下工作:

.fruits li::nth-last-child(2):after {content: "and ";}

请问我在这里遗漏了什么？

Answer 1

您应该以不同的方式定位您的第二个列表项 .fruits class。这样做的方法是这样的 .fruits li:nth-child(n)::after { content: " your text" ; }

括号内的 n 是列表项的编号。

.fruits {font-weight: bold; color: #999999}
.fruits ul {display: inline; padding: 0}
.fruits li {display: inline}
.fruits li:after {content: ", ";}
.fruits li:last-child:after {content: ".";}
.fruits li:nth-child(2)::after {content: " and ";}

<div class="fruits">
  <ul>
    <li>Apples</li>
    <li>Oranges</li>
    <li>Mangos</li>
  </ul>
</div>

制作 inline/horizontal 列表 -- 倒数第二个问题 child

Making inline/horizontal list -- issues with second last child

css

list

parent-child