Question

在CSS中，如果我想为给定类的3个子类设置样式，是否有一种简单的方法可以在不必为每个子类重复根类的情况下这样做？ / p>

例如，假设我有这个html：

<div class="parent1">
    <div class="subClass1">Sub-Class-1</div>
    <div class="subClass2">Sub-Class-2</div>
    <div class="subClass3">Sub-Class-3</div>
    <div class="subClass4">Sub-Class-4</div>
    <div class="subClass5">Sub-Class-5</div>
    <div class="subClass6">Sub-Class-6</div>
</div>

<div class="parent2">
    <div class="subClass1">Sub-Class-1</div>
    <div class="subClass2">Sub-Class-2</div>
    <div class="subClass3">Sub-Class-3</div>
    <div class="subClass4">Sub-Class-4</div>
    <div class="subClass5">Sub-Class-5</div>
    <div class="subClass6">Sub-Class-6</div>
</div>

我希望将 parent1 的子类1,3,6分为红色（不影响 parent2 子类）。我这样做的方式是CSS：

.parent1 .subClass1,
.parent1 .subClass3,
.parent1 .subClass6
{
    color: red;
}

CSS中是否有一种语法可以代替我这样做：

.parent1 (.subClass1, .subClass3, .subClass6)
{
    color: red;
}

...所以 parent1 类只需输入一次？

Answer 1

不是您描述的方式，但在您的具体示例中，您可以使用verifyNoMoreInteractions为每个奇怪的孩子设置样式：

nth-child

或者，如果您要定位的每个类都有共同的文本，您可以使用属性选择器：

.parent1 div:nth-child(odd) {

}

这将针对在其类中某处具有.parent1 div[class*=subClass] { }的parent1的所有子项。所以在你的情况下会选择所有的孩子。

多个任意子女的CSS短手

1 个答案: