css - 用不同的颜色设计替代 block 引用

Question

我有以下代码。我想为具有内部文本 Text2 和 Text4 的 block 引用设置不同的背景颜色，为具有内部文本 Text1 和 Text3 的 block 引用设置不同的背景。需要帮助。

<div class="quotes">
<blockquote>Text1</blockquote>
<blockquote>Text2</blockquote>
<blockquote>Text3</blockquote>
<blockquote>Text4</blockquote>
</div>

Answer 1

您可以使用 nth-child selector :

前-

blockquote:nth-child(1){ /*for first blockquote */
  background-color: red;
}
blockquote:nth-child(2){ /*for second blockquote */
   background-color: red;
}

---

根据您的评论:

您也可以使用奇数和偶数:

blockquote:nth-child(odd){
   background-color: red;
}


blockquote:nth-child(even){
   background-color: red;
}