html - 如何为孩子的每个孩子设置不同的背景颜色

Question

我想做一个类似风格的 reddit 评论。

像那样：

<div>
  <div class="comment" style="background: white;">
    <div class="comment" style="background: grey;"></div>
    <div class="comment" style="background: grey;">
      <div class="comment" style="background: white;">
        <div class="comment" style="background: grey;"></div>
      </div>
    </div>
  <div class="comment" style="background: white;"></div>
</div>

我正在寻找我的情况

实际上我的 html 代码是由 Rails 生成的，看起来像这样

<div class="comment_main-list>
  <div class="comment_list">
    <div class="comment">blabla</div>
    <div class="comment_main-list>
       <div class="comment_list>
         <div class="comment">answer to blabla</div>
       </div>
    </div>
  </div>
  <div class="comment_list">...</div>
</div>

我试图采取类似的东西

.comment_list{
  background: #ececec;
  .comment_list{
    background: #dfdfdf;
    .comment_list{
      background:  #ececec;
    }
  }

显然它可以工作，但我不能在不确定的时间内这样做，我试图查看 sass 中的循环，但我不知道如何提前知道评论的数量。

也nth:child或nth:type不做我想做的事。

你知道我该怎么做吗？

谢谢

标签： htmlcsssass

Answer 1

<div>
  <div class="comment" style="background: white;">
    <div class="comment" style="background: grey;"></div>
    <div class="comment" style="background: grey;">
      <div class="comment" style="background: white;">
        <div class="comment" style="background: grey;"></div>
      </div>
    </div>
  <div class="comment" style="background: white;"></div>
</div>

在 CSS 上

 div:nth-child(1) {
      background: red;
 }
 div:nth-child(2) {
      background: blue;
 }