定义子元素集的规则

Question

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

CSS

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

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

• .SpecialBox input
• label

我可以修改选择器以单独说明这两个项目

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

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

这是一个fiddle来演示

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

我相信有一种方法可以用 SASS 或 LESS 来做到这一点，但我更喜欢用直接的CSS做到这一点

Answer 1

仅针对input和label元素，您必须重复选择器。

如果你想要所有孩子，你可以使用通配符：.SpecialBox *这会将风格应用于所有孩子。

Answer 2

只需使用课程.SpecialBox *？

Answer 3

使用*选择器：

.SpecialBox  *