html - 像对待 <dt> 的 child 一样对待 <dd>

Question

我想做这样的事情:

dt.red {
  color: red;
}

.red~dd {
  border-left: solid red;
}

dt.blue {
  color: blue;
}

.blue~dd {
  border-left: solid blue;
}

<dl>
  <dt class="red">Red</dt>
  <dd>Crimson</dd>
  <dt class="blue">Blue</dt>
  <dd>Azure</dd>
  <dd>Cyan</dd>
  <dt class="red">More red!</dt>
  <dd>Vermilion</dd>
  <dd>Scarlet</dd>
</dl>

https://www.w3schools.com/code/tryit.asp?filename=GBC5PEYKTOJB但是因为蓝色规则排在第二位，所有 <dd>在 class="blue 之后是蓝色的。

我可以使用 .red + dd如果永远只有一个，但通常不止一个。我可以将每个段包装在 <div class="color"> 中，我可能最终会这样做。

但是还有别的办法吗？让每个后续的都覆盖过去的东西？

Answer 1

工作示例

.red {
    color: red;
}

.blue {
    color: blue;
}

dt, dd {
  padding: 5px;
}

.red ~ dd,
.red ~ .blue ~ .red ~ dd,
.red ~ .blue ~ .red ~ .blue ~ .red ~ dd {
    border-left: 3px solid red;
}

.blue ~ dd,
.blue ~ .red ~ .blue ~ dd,
.blue ~ .red ~ .blue ~ .red ~ .blue  ~ dd {
    border-left: 3px solid blue;
}

<dl>
  <dt class="red">Red</dt>
  <dd>after red</dd>
  <dd>Red also</dd>

  <dt class="blue">Blue</dt>
  <dd>after blue</dd>
  <dd>should be blue</dd>

  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>

  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>


  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>


  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>


  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>

  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>

  <dt class="red">Red</dt>
  <dd>should be red</dd>
  <dd>should be red</dd>


  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>

  <dt class="blue">Blue</dt>
  <dd>should be blue</dd>
  <dd>should be blue</dd>
</dl>