Html 如何使用不同颜色设置相同类名值的样式

假设我有两个相同类的值和“MyTitle”。如何设置2个值的样式以使其具有不同的颜色

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

使用：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;
}

---

再上一节课就行了

.MyTitle{
颜色：红色；
}
格林先生{
颜色：绿色；
}

插入文本1
插入文本2

使用第n个子项（n）选择器

.MyTitle:第n个子项（1）{
颜色：红色；
}
.MyTitle:第n个孩子（2）{
颜色：绿色；
}

在此处插入文本
在此处插入文本

尝试在HTML中对其进行样式设置，以便将其用于此元素一次，以获得不同的颜色，如：

.MyTitle{
颜色：红色；
}

在此处插入文本。
在此处插入文本。
在此处插入文本。

给出另一个类的

id

.Mytitle#秒{
颜色：红色；
}
.Mytitle#第一{
颜色：绿色；
}

文本
文本

使用:n类型，使用:n子类型是不安全的。您可以改为使用类型的第n个。 例：

话
小

小猪
第n个子（2）{color:red；}/*现在不正确*/
第（2）类的p:n{color:red；}/*仍然有效*/

有关更多详细信息，请参阅下面的给定链接。

---

如果您在div中添加不同的id，则它会起作用。例如：

.MyTitle#first {
color: red; 
}
.MyTitle#second {
color: green; 
}

---

只是一个注释-通常情况下使用id而不是

nth child

，但是如果您没有访问html的权限，那么

nth child

就是您要查找的缺少id。使用id是不好的做法。添加第二个类或使用第n个子类更好。添加第二个类是更好的选择，您有一个模式使用第n个类。

<section>
  <h1>Words</h1>
  <p>Little</p>
  <p>Piggy</p>    <!-- Want this one -->
</section>


p:nth-child(2) { color: red; } /* Now incorrect */

p:nth-of-type(2) { color: red; } /* Still works */

.MyTitle#first {
color: red; 
}
.MyTitle#second {
color: green; 
}