10

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

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

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

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

谢谢！

4

5 回答 5

21

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

于 2010-12-06T16:36:51.107 回答
8

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

li {
   color: blue;
}

li:active {
  color: red;
}

结果：未激活的是blue。

于 2010-12-06T16:37:24.390 回答
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');
});
于 2010-12-06T16:47:50.160 回答
2

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

li{  font-weight:bold; }

:active li{ font-weight: normal; }

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

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

于 2010-12-06T18:23:32.763 回答
0

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

你希望所有<li>的都是粗体，直到一个被点击，对吧？开始：

li { 
  font-weight: bold; 
}

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

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

~ 选择活动 li 的所有兄弟元素，而不选择活动元素本身。

于 2010-12-06T16:41:11.763 回答