html - 选择除最后一个列表元素之外的所有元素

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

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

下面是specifications说说简单的选择器:

A simple selector is either a type selector, universal selector, attribute selector, class selector, ID selector, or pseudo-class.

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>