html - 直接后果div的sass风格

Question

例如，假设我的代码如下所示。与css all divs vs direct child divs相同但是，在 SASS 中需要。

<div class="Root">
    <div>ddddddd</div>
    <div>
        <div>pppppppppp</div>
        <div>pppppppppp</div>
    </div>
    <div>ddddddd</div>
</div>

我想在包含 ddddddd 的 div 上放置边框，并且我想将所有 div 上的文本颜色设置为绿色。

有两条规则:

我无法添加类属性。我必须编写以 .Root 开头的选择器。

有什么想法吗？

Answer 1

它可能是这样的(SASS):

.Root 
  padding: 1em
  color: green
  > div:not(:nth-of-type(2))
    border: 1px solid red

编译为:

.Root {
  padding: 1em;
  color: green;
}
.Root > div:not(:nth-of-type(2)) {
  border: 1px solid red;
}

<div class="Root">
    <div>ddddddd</div>
    <div>
        <div>pppppppppp</div>
        <div>pppppppppp</div>
    </div>
    <div>ddddddd</div>
</div>

也是最后<div>应该是 </div> .