无法弄清楚如何创造一个特殊的条件

Question

嗨，我有这些代码块：

<div id="wrapper">
   <dt class="complete">
   </dt>
</div>

动态改变为：

<div id="wrapper">
   <dt class="complete">
   </dt>
   <dd class="complete">
   </dd>
</div>

我想让dt.complete的背景色在没有兄弟dd.complete时变成白色。

当有兄弟dd.complete时，我想指定dt.complete以获得灰色背景。

如何创建此条件？我正在使用sass和指南针。

Answer 1

dt {
    &.complete {
       background-color: gray;
       &:only-child {
           background-color: white;
       }
    }
}

Demo

Answer 2

您可以使用相邻的选择器+来定位兄弟姐妹。

dt + dd {
  background-color: gray;
}

这将定位dd后面的任何dt。较早的情况比较棘手，但您可以使用only-child selector。 Check this out

dt:only-child {
    background-color: gray;
}