多个 :not 伪无法按预期工作

Question

一个普通的网站菜单，带有大小合适的按钮，由带有background-color 的块内的居中列出的文本组成。 我需要按钮在悬停时、按下时以及用户在相应页面上时更改其background-color。

菜单的HTML：

<div class="box box-menu">
            <ul class="nav">
                <a href="index.html"><li class="button button-activated">Home</li></a>
                <a href="menu/gallery.html"><li class="button">Gallery</li></a>
                <a href="menu/commission.html"><li class="button">Commission Us</li></a>
                <a href="menu/staff.html"><li class="button">Official Staff</li></a>
                <a href="menu/faqtos.html"><li class="button">FAQ / TOS</li></a>
                <a href="menu/contacts.html"><li class="button button-last">Contacts</li></a>
            </ul>

及其样式表：

.box-menu{
  position: relative;
  float: left;
  width: 200px;
}

.nav{
text-align: center;
}

.button{
  height: 70px;
  list-style-type: none;
  background-color: #141414;
  color: #e8a53c;
  font-size: 20px;
  line-height: 60px;
  vertical-align: middle;
  text-shadow: 2px 2px black;
  margin-bottom: 10px;}

.button-last{
  margin-bottom: 0;
}

.button:hover:not(.button-activated):not(.button:active) {
  background-color: #141414;
  color: #901313;}

.button:active{
  background-color: #761111;
}

.button-activated{
  background-color: #901313;
  color: #e8a53c;
}

:active 用于单击按钮。 button-activated 是当前所选页面的类。

有点不必要的混乱，但无论如何。

1. 我希望“已激活”按钮在悬停时不改变颜色。
2. 我希望其余按钮在悬停时改变颜色。
3. 当用户按下按钮时，我想要它的 :active（被点击）background-color - 而不是它的 :hover background-color（因为用户有当他按下按钮时，他的鼠标在按钮顶部）。

我想解决它的一种方法是使用 :not 伪，但是每当我在一行中编写多个它们时，整个事情就会完全停止工作......它应该像这样工作：

“按钮应该在悬停时改变背景颜色 - 除非它被点击，并且除非它被指定为你所在的页面。”

我做错了吗？我需要单独编写它们，一次一个 :not 吗？

Answer 1

问题不是你有多个:not()，而是你的第二个无效。

在当前的CSS Selectors Level 3 规范¹ 中，not() 只接受simple selectors，而.button:active 是一个复杂选择器，因此您的not(.button:active) 无效并且整个规则被丢弃。

但在你的情况下，你真的不需要那个复杂的选择器，简单的:active 就可以了，它会给你.button:hover:not(.button-activated):not(:active)。

这是一个更简单的例子，仍然暴露了这个问题：

.foo:not(.bar):not(.foo:hover) { /* does not work */
  color: red;
}
.foo:not(.bar):not(:hover) { /* does work */
  background-color: green;
}

<div class="foo">hover me to remove stylings</div>

^{1 - 虽然下一个版本 'CSS Selectors Level 4' 现在将 not() 的参数设置为 selector-list，所以如果我做对了，我们应该很快就能在这里传递复杂的选择器。}

Answer 2

With multiple css classes it's better to list with comma separation，而不是像您在此处使用伪类所做的那样将它们链接起来。

.button:hover:not(.button-activated), 
.button:hover:not(.button:active) {
  background-color: #141414;
  color: #901313;
}

但是，一般来说，对于更复杂的类和代码，描述性通常比效率更有用。在将其插入 CodePen 之后，将它们分开可能是可行的方法并且仍然可以使用：

.button:hover:not(.button-activated) { 
  background-color: #141414;
  color: #901313;
}

.button:hover:not(.button:active) {
  background-color: #141414;
  color: #901313;}