Несколько: не псевдо не работает, как задумано

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;
}

: активная предназначена для кнопки при ее нажатии. кнопка-активированная - это класс для выбранной в данный момент страницы.

Немного бесполезно, но все равно.

1. Я хочу, чтобы активированная кнопка НЕ ​​меняла цвет когда он находится над ним.
2. Я хочу, чтобы остальные кнопки меняли цвет при наведении на них.
3. Когда пользователь нажимает кнопку, я хочу, чтобы ее : active (при нажатии) background-color - НЕ его : hover background-color (так как пользователь нажимает на кнопку мыши поверх кнопки при нажатии).

Один из способов решения этой проблемы - использовать : не псевдо, но всякий раз, когда я пишу несколько из них в одну строку, все перестает работать вообще ... Это должно работать так:

"Кнопка должна изменить цвет bg при наведении курсора - если она не нажата, и если она не указана в качестве страницы, на которой вы находитесь."

Я что-то не так делаю? Нужно ли писать их отдельно, по одному : не одновременно?

Answer 1

Проблема не в том, что у вас есть несколько :not(), а в том, что ваш второй недействителен.

В текущем CSS Уровень селекторов 3 Спецификация ¹ , not() принимает только простых селекторов , а .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 Селектор 4-го уровня теперь делает not() параметр a список селекторов , поэтому, если я правильно понял, мы скоро сможем передать сложные селекторы здесь.}

Answer 2

С несколькими css классами лучше перечислять через запятую , а не объединять их в цепочку, как вы сделали здесь со своими псевдоклассами.

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

Однако с более сложными классами и кодом в целом, описательный часто более полезен, чем эффективность. Разделение их может быть способом к go и все еще функционировать, после того, как он подключен к CodePen:

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

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