html - 删除使用 :after pseudo element 嵌入的每个 dt 之前最后一个 dd 的逗号

Question

我如何使用 CSS 在描述 (dd) 元素之后添加一个逗号，每个新描述术语之前的最后一个逗号除外？例如:

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>      <!-- No comma needed here -->
    <dt>Term</dt>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>      <!-- No comma needed here -->
</dl>

注意:我正在寻找一种独立于 dt 之前的 dd 元素数量的解决方案。

在每个 dd 之后添加逗号很简单:

dd:after
{
content:",\00a0";        /* A comma and a space after each description (dd) */
} 

但是这也会在紧接在 dt 之前的每个 dd 之后添加一个逗号。 dd:last-child:after 在这里显然没有用，除非有一些我不知道的其他 CSS 选择器。

Answer 1

您不能使用 :last-child或 :last-of-type在这里，因为您的元素没有嵌套在子父元素中。

所以你可以使用:nth-of-type(3n) ，意味着我们选择您的 dd 的每 3 次迭代嵌套在 dl 下的元素元素。

dl dd:nth-of-type(3n):after {
    content:"";
}

Demo

如果你的每个列表都有一致数量的元素，这将很有用，如果不是，我建议你用子父级包装列表，然后你可以使用 :last-child或 :last-of-type无论他们拥有多少元素，都可以伪装成他们的目标。

或者如果它们不是动态的，那么你可以使用 like

dl dd:nth-of-type(3):after,
dl dd:nth-of-type(8):after {
   content: "";
}

/* Assuming if you have inconsistent list items and 3rd dd and 8th dd 
   are last child of their respective lists.. and you don't  want a sub 
   wrapper element */

---

如果你想要更兼容的选择器，你也可以使用相邻的选择器 + ..

dl dd + dd + dd:after {
    content:"";
}

Demo 2

但是如果你有 2-3 个 dd，上面的选择器会很好用元素越多，选择器越难写，所以如果你有更多的元素，请引用我一开始提供给你的选择器。

P.S Using /* No comma needed here */ is an invalid comment in HTML, should use <!-- Comment goes here -->.