0

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

当前的 CSS

.class1 {
    ...elided...
}

.class2 {
    ...elided...
}

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

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

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

我想做什么

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

那会奏效吗？浏览器对此的支持是什么？

4

2 回答 2

2

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

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

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

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

于 2013-10-23T18:18:11.270 回答
1

只需用逗号分隔所有声明：

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

你的第二个例子不是你要找的，因为它相当于：

.class1:active {
    ...elided...
}
class2:active .ChildClass {
    ...elided...
}
于 2013-10-23T18:19:02.290 回答