如何用纯CSS选择<dt>对应最后一个<dd>且不修改DOM？

当然有办法解决这个问题！完全不用改动你的<dl>结构，纯CSS就能精准选中每个<dt>（包括连续多个<dt>）之后的最后一个<dd>。

先说说你原来代码的问题：你用的dl dd:last-of-type, dl * dd:last-of-type只会选中每个父容器里的最后一个<dd>——比如整个<dl>的最后一个<dd>，或者<section>里的最后一个<dd>，但像<Headline 2>后面的第三个<dd>，它既不是<dl>的最后一个<dd>，也不在其他子容器里，所以不会被选中，这就是为什么你之前需要用<section>分组来做临时处理。

解决方案：用:has()伪类实现精准选择 #

现在现代浏览器支持的:has()伪类可以完美解决这个需求，直接用下面的CSS：

dt { font-weight: bold; }
dd { margin-left: 0; }

/* 选中所有后面没有紧跟<dd>的<dd> */
dd:not(:has(+ dd)) {
  color: red;
  margin-bottom: 20px;
}

选择器原理 #

• :has(+ dd) 表示“自身后面直接跟着一个<dd>的元素”
• 加上:not()否定后，dd:not(:has(+ dd))就会选中所有后面不再紧跟<dd>的<dd>——这些正好就是每个<dt>组后的最后一个<dd>：
  • 不管前面是单个<dt>还是连续多个<dt>
  • 不管后面是<dt>、其他容器标签，还是到了<dl>的结尾
  • 包括你放在<section>里的那组<dd>，也能正确选中最后一个

兼容性说明 #

:has()选择器从Chrome 105、Firefox 121、Safari 15.4开始支持，现在主流的现代浏览器都已经支持这个特性。如果需要兼容更老的浏览器，可能需要考虑JS辅助，但如果你的项目目标是现代环境，这个纯CSS方案完全够用。

用这个代码替换你原来的CSS，就能实现你要的效果，再也不用手动给<dt>和<dd>分组啦！

内容的提问来源于stack exchange，提问作者Simon