Html 使用：after伪元素删除嵌入的每个dt之前最后一个dd的逗号

如何使用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>

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

试试这个：

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

您不能在此处使用

：last child

或

：last of type

，因为您的元素没有嵌套在子父元素中

因此，您可以使用类型（3n）的

：n，这意味着我们每三次选择嵌套在
dl
元素下的
dd
元素

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


如果您的每个列表都有一致数量的项目，那么这将非常有用，如果没有，那么我建议您使用子父项包装列表，并且您可以使用
：last child
或
：last of type
pseudo将其作为目标，而不考虑它们所持有的项目数量

或者如果它们不是动态的，您可以使用

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-3个
dd
元素，则可以使用上面的选择器，您拥有的元素越多，选择器编写起来就越困难，因此如果您有更多的项，请参考我首先提供给您的选择器

在这里使用
/*不需要逗号*/
的注释在HTML中无效，
应使用

如果您不介意在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
前面加上“，”呢，除非它前面紧跟着一个
dt
？（哦，等等，可能是换行符。没关系；））在CSS中，你不能根据元素后面的内容来设置元素的样式。可能有一种解决方法是在
：before
中添加内容，但这取决于
dl
作为一个整体应如何设置样式。1）不必要的
！重要信息
为了其自身的利益，有一个保证的下一票2）
dl:last child
如果它是其父级的最后一个子级，则选择
dl
。不是
dl
的最后一个子级。请参见，即使
dl:last child
选择了
dl
的最后一个子项（它没有），它也不会选择任意一组术语和描述中的最后一个
dd
，例如，在
dt
之前的
dd
，正如OP所希望的那样。
有什么用？即使是
也应该可以正常工作？浏览器是宽容的，这并不意味着我们应该把它视为理所当然。你可以定义
类
，这是一回事：）而且，只使用
数据也是有效的，它们被称为布尔值attributes@Mr.Alien-使用
类
与使用
数据-*
不是一回事，因为前者不提供任何语义，可能除了阅读它的人之外<代码>数据-*
旨在提供机器可读的语义值。但是，我同意你的观点，OP应该使用
class
而不是
data-*
，因为在这种特殊情况下，他需要选择一个元素来进行样式化，根据定义，这个元素是“非语义的”。感谢演示。您能给我一个示例演示，用子父级包装列表并使用：last child或：last of type pseudo吗？：]@MattyPantaloons欢迎您，如果答案对您有帮助，您可以单击答案旁边的勾号…该演示的唯一问题是描述列表每个只有一个dt。我正在寻找一种解决方案，它适用于每个列表中有一个以上dt的dl。不可能？
<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:"";
}