如何使用纯 CSS 更改不活动的 <li> 元素？答案

【问题标题】：How do change <li> elements that are NOT active with pure CSS?如何使用纯 CSS 更改不活动的 <li> 元素？
【发布时间】：2011-05-21 02:24:46
【问题描述】：

我了解如何更改活动<li> 元素的描述

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

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

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

谢谢！

【问题讨论】：

【解决方案1】：

我想li:not(:active) 至少理论上应该可行。

【讨论】：

+1 是的，但这只是 CSS3，所以 Brad 的答案更加兼容。
@BoltClock：嗯。 :not 已经存在很长时间了，我实际上认为它是 CSS 2(.1)。感谢您指出这一点。
你的意思是在 jQuery 中？是的，因为 jQuery 选择器是从 CSS3 改编而来的 :)
@BoltClock：不，我的意思是在 CSS 中。浏览器可能不支持，但仍然“存在”（例如，:hover 已经存在了很长时间，但 IE 花了好几年才开始正确支持它）

【解决方案2】：

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

li {
   color: blue;
}

li:active {
  color: red;
}

结果：未激活的是蓝色。

【讨论】：

【解决方案3】：

根据您的示例扩展布拉德的答案：

您希望所有<li> 都加粗，直到有一个被点击，对吧？开始：

li { 
  font-weight: bold; 
}

然后，如果单击列表项，请保持该项为粗体，而其他项为常规：

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

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

【讨论】：

【解决方案4】：

重读您的问题后，我认为真正的答案是您不能单独使用 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');
});

【讨论】：

谢谢！ :not() 伪类正是我想要的。在 FF3、Chrome 和 IE8 上进行了测试。 IE8不支持，不过没关系。
@Roberto：你的意思是单独使用 CSS :not() 可以按预期工作吗？
"我意识到这不会起作用，因为样式会立即应用，并且 DOM 中的元素通常不是：默认情况下：活动：" 但是默认情况下，链接永远不会悬停样式表加载，但 :hover 工作得很好？不确定你的论点是否有效。我确实同意解决方案，但也许是出于另一个原因：P

【解决方案5】：

如果我理解正确应该这样做，

li{  font-weight:bold; }

:active li{ font-weight: normal; }

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

所以基本上你希望父节点上的活动状态将所有内容切换为正常状态，然后覆盖也处于活动状态的 li。

【讨论】：