html - 最后的 CSS 选择器后或其他

Question

我想<dd>在每个对应之后设置最后一个样式<dt>而不更改 DOM。<dt>我发现除了通过将相关的和分组<dd>到或类似的东西<section>来操作 DOM 之外别无他法。<div>

是否有一种仅使用 CSS 的方法来选择<dd>a 之后的每个最后一个<dt>而不进行操作<dl>？

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

dl dd:last-of-type,
dl * dd:last-of-type {
  color: red;
  margin-bottom: 20px;
}

<dl>
  <dt>Headline 1</dt>
  <dd>This should be styled...</dd>

  <dt>Headline 2</dt>
  <dd>Lorem ipsum...</dd>
  <dd>Lorem ipsum...</dd>
  <dd>This should be styled...</dd>

  <dt>Headline 3A</dt>
  <dt>Headline 3B</dt>
  <dd>This should be styled...</dd>

  <dt>Headline 4A</dt>
  <dt>Headline 4B</dt>
  <dd>Lorem ipsum...</dd>
  <dd>Lorem ipsum...</dd>
  <dd>This should be styled...</dd>

  <section>
    <dt>WORKAROUND: Headline 5A</dt>
    <dt>WORKAROUND: Headline 5B</dt>
    <dd>Lorem ipsum...</dd>
    <dd>Lorem ipsum...</dd>
    <dd>This should be styled...</dd>
  </section>

  <dt>Headline 6</dt>
  <dd>This should be styled...</dd>
</dl>

标签： htmlcss