如何用不同的颜色设置相同的类名值

Question

假设我有 2 个与“MyTitle”相同的值。我如何设计 2 个值以具有不同的颜色？

<div class="MyTitle">Insert text here</div>
<div class="MyTitle">Insert text here</div>

我希望此处插入文本的第一个值是红色，然后是绿色？

我是这样做的，但它适用于两者，知道如何解决这个问题吗？

.MyTitle {
 color: red;
}

Answer 1

使用 :nth-child() 选择器。

下面的例子：

.MyTitle:nth-child(1) {
//This will style the first element
color: red;
}
.MyTitle:nth-child(2) {
//This will style the second element
color: green;
}