Treating 就像

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">中，然后我可能最终会这样做。

但是还有其他方法吗？是什么使随后的每个覆盖过去的？

我想做这样的事情：dt.red {color：red; } .red〜dd {左边框：红色常亮； } dt.blue {color：blue; } .blue〜dd {border-left：稳定的蓝色； }

...

Answer 1

工作示例

Answer 2

我将如何做？