<分区>
标签 css css-selectors
<分区>
在 CSS 中，如果我想为一个给定类的 3 个子类设置样式，是否有一种快捷方式可以不必为每个子类重复根类？
例如，假设我有这个 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 类只需输入一次？
最佳答案
不是您描述的方式，但在您的特定示例中，您可以使用 nth-child 来设置每个奇数子项的样式:
.parent1 div:nth-child(odd) {
}
或者，如果您要定位的每个类都有共同的文本，您可以使用属性选择器:
.parent1 div[class*=subClass] {
}
这将针对在其类中某处具有 subClass 的 parent1 的所有子级。所以在你的情况下会选择所有 child 。
关于多个任意子项的 CSS 简写，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46053544/