html - 如何在不给它一个 ID 的情况下只更改一个类的一个元素？

Question

我的问题:

是否可以只更改一个类的一个元素而不(a) 给它一个自己的 ID 和 (b) 不在 HTML 文档中做内联样式 ？

我为什么要这样做？

我正在使用一个软件，程序在其中自行创建类和 ID(用于调查问卷)。我不能更改或添加类/id，也不能更改 html。我唯一能做的就是用 CSS 获取那些已经定义的类并设置它们的样式(这就是我想做的)。

示例:

JSFiddle:http://jsfiddle.net/nyGWc/

在此示例中，我只想将第二个“.class2”的背景色更改为绿色(而第一个“.class2”div 应保持红色)。

<div class="class0">
    <div class="class1">
        <div class="class2">
            This div has a red background color. 
        </div>
    </div>
</div>

<div class="class0">
    <div class="class1">
        <div class="class2"> 
            This div should be green without adding an ID to it. 
        </div>
    </div>
</div>

CSS:

.class1 {
    height: 3em;
}

.class2 {
    background-color: red;
}

到目前为止我尝试了什么:

我试过使用 :nth-child(2) 和 :nth-of-type(2) 但据我所知，它只选择父元素下的目标子元素？在我的示例中，类为“.class2”的 div 元素不是兄弟元素。所以那些是行不通的。

非常感谢!

Answer 1

正如您所说的那样，由于 class2 元素不是 sibling ，因此您不能使用第 nth-child。所以你的问题的解决方案是对 class0 使用 nth-child。这是代码

.class0:nth-child(2) .class2{
    background-color: green;
}

FIDDLE