Question

假设我有2个相同类别的值，其中包含＆＃34; MyTitle＆＃34;。如何设置2个值以使其具有不同的颜色？

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

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

我是这样做的，但它适用于两者，任何想法如何解决这个问题？

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

Answer 2

给另一个班级id

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

<div id="first" class="Mytitle"> text </div>
<div id="second" class="Mytitle"> text </div>

Answer 3

如果你在你的div中添加不同的id，它就有效。例如：

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

Answer 4

再使用一个课程。

＆＃13;

.MyTitle {
  color: red;
}

.green {
  color: green;
}

＆＃13;

<div class="MyTitle">Insert Text 1</div>
<div class="MyTitle green">Insert Text 2</div>

＆＃13;

Answer 5

使用var ToDo = angular.module('ToDo', [ 'ui.router', 'ngResource']);选择器

＆＃13;

nth-child(n)

＆＃13;

.MyTitle:nth-child(1) {
 color: red;
}

.MyTitle:nth-child(2) {
 color: green;
}

＆＃13;

Answer 6

使用 ：nth-of-type ，使用：nth-child 是不安全的。您可以改用：nth-of-type 。例如：

<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 */

有关详细信息，请参阅以下链接。 the-difference-between-nth-child-and-nth-of-type

Answer 7

尝试在HTML中对其进行样式设置，因此对于您想要具有不同颜色的一个元素，它将被使用一次：

＆＃13;

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

＆＃13;

.MyTitle{
color: red;
}

＆＃13;

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

7 个答案: