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

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 也无法满足我的要求。

你知道我该怎么做吗？

谢谢

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;
 }