Question

我需要使用交替颜色设置嵌套的块引用。这是我的标记：

<div class="reply">
  <blockquote class="reply">
     text
     <blockquote class="reply">
        text
          <blockquote class="reply">
             text
          </blockquote>
     </blockquote>
   </blockquote>
</div>

这是我的CSS：

.reply blockquote.reply:nth-child(even) {
  background: #d7eff4;
  border: 1px solid #00B9E4;
}

.reply blockquote.reply:nth-child(odd) {
  background: #a7e2ef;
  border: 1px solid #00B9E4;
}

我已经尝试了nth-of-type和nth-child。 nth-of-type不起作用（至少在Chrome中）。 `nth-child适用于1级和2级但不适用3级。它认为3级是偶数。如何让颜色交替使用？

Answer 1

每个blockquote是其父级的唯一子级。因此，他们都是1号孩子。这是你的问题。

为了达到你想要的效果，你必须使用这样的选择器：

div.reply > .reply{ /* style A */ } 
blockquote.reply > .reply {/* style A */ } 
blockquote.reply > .reply > .reply { /* etc */ }

但这不会无限适用 - 所以，你必须改变你的html，这样你就可以做这样的事情：

.reply > .rereply { /* style A */ }

.rereply > .reply { /* style B */ }

Answer 2

根据Are alternate nested styles possible in CSS?：

似乎没有任何用于遍历嵌套的css选择器（＆gt;选择器除外，它只查看父项的直接子项）。

话虽如此，对于任意深度的块引用嵌套，这是不可能的。因此，最好（也许唯一的方法）就是

.reply > blockquote.reply { ... }
.reply > blockquote.reply > blockquote.reply { ... }
.reply > blockquote.reply > blockquote.reply > blockquote.reply { ... }

等等。

使用交替颜色的样式块引用

2 个答案: