html - 为子元素集定义规则

Question

例如，我希望某个 class 中的 labels 和 input 字段具有相似的规则。

CSS

.SpecialBox input, label{
    background-color: green;
}

当我使用前面的代码时，它实际上做了什么，它将规则应用于 SpecialBox 和 ALL 标签中的任何输入字段，因为规则集应用了每个逗号分隔的元素:

• .SpecialBox 输入
• 标签

我可以修改选择器以分别阐明这两个元素

.SpecialBox input, .SpecialBox label{
    background-color: green;
}

在这种情况下我得到了想要的结果，但是以简洁为代价

这是一个 fiddle演示

有没有办法将一组规则应用于特定选择器的所有子元素，或者我是否被迫重复父元素选择器？

我相信可以使用 SASS 或 LESS 来实现这一点，但我更愿意直接使用 CSS

Answer 1

只有 input 和 label 元素，您必须重复选择器。

如果您想要所有子项，可以使用通配符:.SpecialBox * 这会将样式应用于所有子项。