html - 可以使用逗号将带有子类的 CSS 声明应用于多个类吗？

Question

我目前有不同的 CSS 类，但它们适用于具有同一类 (ChildClass) 的子元素的元素。我想在父类处于事件状态时更改子类的不透明度。现在我正在用许多 CSS 声明来做这件事(见下面的例子)。这可以用一个声明来完成吗？

当前 CSS

.class1 {
    ...elided...
}

.class2 {
    ...elided...
}

.class1:active .ChildClass {
    ...elided...
}

.class2:active .ChildClass {
    ...elided...
}

对于两者，子类的变化是相同的。我可以做这样的事情吗？

我想做什么

.class1:active,class2:active .ChildClass {
    ...elided...
}

那行得通吗？浏览器对此有何支持？

Answer 1

不，您需要在每个逗号分隔的部分中放置完整的选择器字符串，因此您需要:

.class1:active .ChildClass, class2:active .ChildClass {
    ...elided...
}

您之前使用它的方式是针对 .class1:active 和 .class2:active .ChildClass 而不是每个的 .ChildClass。逗号分隔完整的选择器字符串，没有缩写 - 如果您考虑一下，这是有道理的，因为对于复杂的选择器，CSS 无法知道缩写“快捷方式”从哪里开始。

如果您对速记 CSS 或其他在输入复杂选择器时节省时间和精力的方法感兴趣，我建议您研究一下 SASS 或其他预处理器(LESS、Stylus 等)。