伪类的功能:不是伪类选择器-CSS问题

Question

我正在尝试选择所有内容，但是我当前点击的东西。

基本上，我有一堆.node-teaser元素，这些元素都以相同的方式进行样式，并且具有相同的类，只有它们在:active上变得更大。

当我单击一个时，我想"重置"所有其他动画/过渡，以便只有当前的动画。因此，基本上，我想：

.node-teaser:not(.node-teaser:active) {
   max-height: 50px;
   .....
}

但是，我不能使用伪类作为:not()的参数。我如何以不同的方式解决问题，还是我错过了一些东西？

我遇到了我的课程，因为它们是由Drupal生成的，我真的不想更改主题的PHP模板。而且，我想证明这与我自己一起使用，但我被困住了。

有此~选择器。如果有一些可以在当前元素之前选择的每个元素（与tilde选择器相反的是选择元素之后的所有内容），我基本上可以添加这两个元素，而除了当前一个以外的所有内容，我都可以在之前和所有内容中添加所有内容。我认为没有选择器与~相反。如果我错了，请纠正我！

编辑：由于我似乎很困惑 ^。 ^。通常：主动无论如何都立即关闭，但我正在延迟过渡。

Answer 1

解决方案是：您可以使用伪类，您不能将它们与真实类组合在一起。

so

.foo:not(.foo:active) {}

不起作用，但是

.foo:not(:active) {}

工作正常：）

这不能解决我的问题，但我想理解很重要。我仍然必须混合课程和伪课程才能实现我的目标。

结论：没有JavaScript（尚未）

您将无法执行此操作

感谢BoltClock在对原始帖子的评论中回答了这一点：）

您遇到了其他人前几天遇到的完全相同的问题：您可以在：Not（）中使用伪级，但是在这种情况下，您同时将班级和伪级组合在一起不是好的

Answer 2

一个（我不会说最美丽的方法）正在恢复到默认值：

.node-teaser {
   max-height: 50px;
}
.node-teaser:active {
   max-height: auto;
}