使用 :after 伪元素删除嵌入的每个 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) */
} 

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

Answer 1

您不能在此处使用

:last-child

或

:last-of-type

，因为您的元素未嵌套在子父元素内。

因此您可以使用

:nth-of-type(3n)

，这意味着我们会选择嵌套在

dd

元素下的

dl

元素的每第 3 次迭代。

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

演示

如果您的每个列表都有一致数量的项目，这将很有用，如果不是，我建议您用子父项包装列表，并且您可以使用

: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:"";
}

演示2

但是如果你有 2-3 个

dd

元素，上面的选择器会很好用，你的元素越多，选择器就越难写，所以如果你有更多的项目，请参考我首先提供给你的选择器.

P.S 使用

/* No comma needed here */

是 HTML 中的无效注释， 应该使用

<!-- Comment goes here -->

。

Answer 2

好吧，如果您不介意在 html 中添加一些内容，这里还有另一种方法。这适用于任意数量的 dd，而不仅仅是 3 个。

这是一个小提琴

<dl>
    <dt>Term</dt>
    <dd>Description</dd>
    <dd data-last-dd="">Description</dd>
    <dt>Term</dt>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd>Description</dd>
    <dd data-last-dd="">Description</dd>
</dl>

---

dd[data-last-dd]:after{
    content:"";
}

Answer 3

现在，您可以将

dt

与他们的

dd

组合在一起。

为了用微数据属性或其他全局属性来注释组 适用于整个组或仅用于样式目的的属性， dl 元素中的每个组都可以包装在 div 元素中。这确实 不改变 dl 元素的语义。

（参见 HTML 生活标准；4.4.9 dl 元素）

您可以使用它来强制最后一个

dd

成为

:last-child

。

示例：

<dl>
    <div>
        <dt>Drinks</dt>
        <dd class="separate-comma">water</dd>
        <dd class="separate-comma">coffee</dd>
        <dd class="separate-comma">juice</dd>
    </div>
    <div>
        <dt>Snacks</dt>
        <dd class="separate-comma">crisps</dd>
        <dd class="separate-comma">nuts</dd>
    </div>
<dl>

使用CSS：

dd:not(:last-child):after {
    content: ", ";
}

现在，juice之后不再添加逗号。

Answer 4

试试这个：

dl:last-child
{
    content:""!important;
}