如何改变纯 CSS 中不活跃的元素？

Question

我了解如何更改活动

元素的描述

li:active {
...declarations...
}

，但是如何更改所有其他不活动元素？

例如，我的所有元素都是粗体，但是当我选择其中一个元素时，所有其他元素都会恢复正常。

谢谢！

Answer 1

我想 li:not(:active) 至少在理论上应该有效。

Answer 2

将规则应用于所有规则，然后将不同的规则应用于活动规则。

li {
   color: blue;
}

li:active {
  color: red;
}

结果：未激活的为蓝色。

Answer 3

重读你的问题后，我认为真正的答案是你不能单独使用 CSS 来控制元素在用户交互中的行为方式。

我意识到这不起作用，因为样式会立即应用，并且 DOM 中的元素通常不是 :active 默认情况下：

li {
    font-weight: bold;
}

li:not(:active) {
    font-weight: normal;
}

加上, :not() 是一个 CSS3 伪类，因此如果您必须考虑较旧的浏览器，那么现在对它的支持相当差。

也许你可以用 JavaScript 来做到这一点（我在这里使用 jQuery）...

$('li').click(function() {
    $(this).siblings().css('font-weight', 'normal');
});

Answer 4

如果我理解正确的话，这应该可以做到，

li{  font-weight:bold; }

:active li{ font-weight: normal; }

:active li:active{ font-weight: bold; }

所以基本上你想要在父级上有一个活动状态，它将所有内容切换到正常状态，然后为也处于活动状态的 li 覆盖它。

Answer 5

根据您的示例扩展 Brad 的答案：

您希望所有

均为粗体，直到单击一个，对吗？首先：

li { 
  font-weight: bold; 
}

然后，如果单击一个列表项，则将该列表项保持为粗体，但使其他项保持常规：

li:active ~ li {
  font-weight: normal;
}

~ 选择与活动 li 相同的所有元素，而不选择活动元素本身。