4

我正在尝试选择除我当前单击的内容之外的所有内容。

基本上，我有一堆.node-teaser元素，它们的样式都相同，并且具有相同的类，只是它们在:active.

当我点击一个时，我想“重置”所有其他动画/过渡，这样只有当前的动画会变大。所以，基本上，我想：

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

但是，我不能使用伪类作为:not(). 我如何以不同的方式解决问题，或者，我错过了什么？

我坚持使用我拥有的类，因为它们是由 Drupal 生成的，我真的不想为主题更改我的 PHP 模板。而且，我想向自己证明这适用于纯 CSS，但我被卡住了。

有这个~选择器。如果要在当前元素之前选择每个元素（与选择元素之后的所有内容的波浪号选择器相反），我基本上可以将这两个加起来，我将拥有之前的所有内容和之后的所有内容=除当前元素之外的所有内容。我不认为有一个选择器与之相反~。如果我错了，请纠正我！

编辑：因为我似乎很困惑 ^.^（对此感到抱歉）：在adornis.de上，我一次只希望扩展一个项目，当您单击第二个项目时，其余项目应该关闭。通常 :active 无论如何都会立即关闭，但我正在延迟过渡。

4

2 回答 2

2

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

所以

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

不起作用，但是

.foo:not(:active) {}

工作得很好:)

这并没有解决我的问题，但我想理解这一点很重要。我仍然必须混合类和伪类来实现我的目标。

结论：没有 javaScript，你不能做到这一点（还）

感谢 BoltClock 在对原始帖子的评论中回答了这个问题:)

您遇到了与前几天其他人完全相同的问题：您可以在 :not() 中使用伪类，但在这种情况下，您将一个类和一个伪类结合起来，这是不行的

于 2012-10-20T09:07:41.167 回答
1

一种（我不会说最漂亮的）方法是恢复为默认值：

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

.node-teaser:active {
   max-height: auto;
}
于 2012-10-20T00:23:02.613 回答