Question

我的问题：

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

为什么我要这样做？

我正在使用一个软件，程序自己创建类和ID（用于问卷调查）。我无法更改或添加类/ ID，也无法更改html。我唯一能做的就是用CSS抓住那些已定义的类并设置它们的样式（这就是我想要做的）。

示例：

在这个例子中，我只想将第二个“.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元素不是兄弟姐妹，你不能使用nth-child。因此，您的问题的解决方案是使用nth-child for class0。这是代码

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

FIDDLE

Answer 2

选择第二个class0，然后选择其子class2。使用nth-of-type允许.class0元素不需要位于同一父元素下。

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

Fiddle

如何只更改一个类的一个元素而不给它一个ID？

2 个答案: