css - 具有交替颜色的样式 block 引用

Question

我需要使用交替颜色来设置嵌套 block 引号的样式。这是我的标记:

<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 号 child 。那是你的问题。

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

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

但这不会无限适用 - 所以，您必须更改您的 html，以便您可以改为执行以下操作:

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

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