如何为div中的第二个元素设置样式

Question

我希望将CSS样式应用于div的第二个子元素。

这是我的HTML代码：

<div class="my">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>

</div>

CSS

.my:nth-child(1) {
    color:red;
}

这是将样式应用于每个元素的方法。这是我的fiddle http://jsfiddle.net/AkCLY/

- Nishant Nawarkhede

---

你只有一个实例的“.my”，所以没有第二个子元素，哈哈，请尝试使用“.my div:nth-child(2)” - john Smith

Answer 1

这就像这样：

其实就是这样：

.my div:nth-child(1) {
    color:red;
}

这里是演示

如果你想要第二个，你需要将 1 改成 2

所以变成 .my div:nth-child(2)

这里是演示

- Ruddy

---

我认为他想要第二个子元素被样式化，而你正在样式化第一个。 - Mister Epic

@ChrisHardie 我认为我不需要指出这一点，因为它非常明显，但我已经编辑了我的答案来指出它。 - Ruddy

Answer 2

你差点就做对了。只需要加一个空格就可以了：

.my > :nth-child(1) {
    color:red;
}

- Dan Ovidiu Boncut

---

（也许你应该添加一个第一代后代选择器：.my > :nth-child(1)） - Armel Larcier

Answer 3

这将会按照您的要求调整第二个子元素的颜色：

.my div:nth-child(2) {
    color:red;
}

代码片段：http://jsfiddle.net/AkCLY/8/

- Mister Epic

Answer 4

请尝试这个：

.my div:nth-child(2) {
    color:red;
}

- Sho

Answer 5

试试这个：

.my div:nth-child(2) 
{
    color:red;
}

- Imran Ali Khan

Answer 6

这对我有效：

.my div:nth-child(2) {
    color:red;
}

- Bhavesh Kachhadiya

Answer 7

你可以尝试这段代码...

.my div:nth-child(2) 
{
    color:red;
}

- KesaVan