Question

我有一个tags列表，我希望水平显示。现在每个<li>，但最后一个，我想在项目后面添加,。

现在，我可以这样做：

ul.tags {
    list-style: none;
}

ul.tags > li {
    display: inline;
}

ul.tags > li:after {
    content: ", ";
}

ul.tags > li:last-of-type:after {
    content: "";
}

现在我考虑结合最后两条规则，例如：

ul.tags > li:not(ul.tags > li:last-of-type):after {
    content: ", ";
}

但这不起作用。如何选择所有但最后 <li>？

Answer 1

您需要的只是:last-of-type中的:not（如下面的代码段所示）。 :not accepts only simple selectors作为参数。

以下是specifications关于简单选择器的说法：

简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

ul.tags > li:not(:last-of-type):after {
  content: ", ";
}
ul.tags {
  list-style: none;
}
ul.tags > li {
  display: inline;
}

<ul class='tags'>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
</ul>

选择除最后一个列表元素

1 个答案: