html - 为子元素集定义规则

例如，我希望某个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

最佳答案

仅对于input和label元素，您将不得不重复选择器。

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

关于html - 为子元素集定义规则，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17973537/