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

不，你需要在每个逗号分隔部分放置FULL选择器字符串，所以你需要：

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

之前的方式是定位.class1:active和.class2:active .ChildClass而不是.ChildClass。逗号分隔完整的选择器字符串，没有缩写 - 如果你考虑它就有意义，因为复杂的选择器CSS无法知道缩写“快捷方式”的开始位置。

如果您对输入复杂选择器时使用速记CSS或其他节省时间和手指能量的方法感兴趣，我建议您查看SASS或其他预处理器（LESS，Stylus等）。

Answer 2

用逗号分隔所有声明：

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

你的第二个例子不是你想要的，因为它等同于：

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

子类的CSS声明是否可以使用逗号应用于多个类？

2 个答案: