用不同颜色设计替代块引用

Question

我有以下代码。我希望对于具有innertext Text2＆amp;的块引用具有不同的背景颜色。 Text4，以及具有innertext Text1＆amp;的块引用的不同背景。文本3。需要帮助。

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

Answer 2

试试这个：

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