伪类的功能：非伪类选择器 - css 问题答案

【问题标题】：Functionality of pseudo class in :not pseudo class selector - css issue伪类的功能：非伪类选择器 - css 问题
【发布时间】：2012-10-10 15:33:41
【问题描述】：

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

基本上，我有一堆.node-teaser 元素，它们的样式和类都相同，只是它们在:active 上变得更大。

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

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

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

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

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

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

【问题讨论】：

这样的？ jsfiddle.net/pk8Ld
好吧，只要您单击包装器或其中一个内容元素，使用该解决方案我就可以“添加”内容，但我需要一种方法来在您完成单击后添加一些内容。因此，如果您的示例在包装器未激活时会更改其他 div 的颜色，那将是解决方案，但它会同时更改颜色（这无助于我重置：|）无论如何，谢谢，告诉如果我不清楚，请告诉我
您必须为此使用 JavaScript。我对您实际尝试做的事情感到有些困惑。
好的，也许我在这里看不到我自己的问题。您介意前往www.adornis.de 并检查真实情况吗？我希望每个节点预告片（那些可扩展的小框）都在 :active 上展开，但一次只能展开一个。所以当你点击下一个时，前一个应该收回。该网站到目前为止是一个巨大的游乐场，它实际上并不在线，所以请不要因为它看起来丑陋而对我大喊大叫：P
您遇到了与somebody else did the other day 完全相同的问题：您可以在:not() 中使用伪类，但在这种情况下，您将两者结合起来类和一个伪类，这是不行的。你是对的，没有前面的兄弟选择器，所以除非你在布局中破解你的方式，否则你将无法使用纯 CSS 选择器来做到这一点。见this other question。

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

所以

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

没用，但是

.foo:not(:active) {}

工作得很好:)

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

结论：没有 javaScript（目前）你无法做到这一点

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

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

【讨论】：