Почему псевдокласс класса hover переопределяет активный псевдокласс

Ответ 1

да, это ожидаемое поведение,

позволяет взглянуть на другой пример. просто добавив два класса,

<ul>
<li class="item first">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item">item</li>
<li class="item last">item</li>
</ul>

здесь класс сначала также входит вместе с элементом класса. но если мы объявим наш css в неправильном порядке, который не даст желаемого поведения

.first { background: blue; }
.item { background: red; }

как вы можете видеть, будет использоваться последний селектор соответствия. это то же самое, что и ваш пример, нет более логичного, 2 псевдокласса считаются равными, поэтому применяются те же правила выигрывает последнее совпадение.

изменить

псевдоклассы равны, это победа! вот jsFiddle, который доказывает мою точку: ссылка определена после: hover,: link wins (test), поэтому ваша заявка: hover overriding: link неверно, это то же самое, что и с: active, все о порядке.

Ответ 2

Активное состояние должно быть объявлено после состояния зависания, в вашем CSS вы сжимаете активное состояние до активного состояния, чтобы оно не запускалось.

Если вы укажете правильный порядок работы, он работает, как показано ниже, он работает нормально.

a.noworks:link, a.noworks:visited {
    background: red;
}

a.noworks:hover {
    background: green;
}

a.noworks:active {
    background: red;
}

Итак, чтобы ответить на ваш вопрос, да, это ожидаемое поведение.

Вот порядок работы:

a:link
a:visited
a:hover
a:active

Ответ 3

Потому что в первом коде вы определили :hover после того, как вы определили :active, поэтому :hover "перезаписано" :active. Во втором, наоборот, :active перезаписывает :hover.

Ответ 4

EDIT:

Извините, я неправильно понимаю вопрос.

В основном, когда вы находитесь в активном состоянии (с указателем мыши), вы также находитесь в состоянии зависания. Поэтому, основываясь на правилах CSS, он будет читать последний в таблице стилей.

Когда вы наводите курсор мыши на ссылку и удерживаете клавишу мыши, вот так: если мы возьмем классы псевдо класса как обычные классы:

<a class="active hover"></a>

Итак, если ваш css был

.active{color:green}
.hover{color:red}

он применил бы красный

но если ваш css был

.hover{color:red}
.active{color:green}

Применяется зеленый

От W3C

a:link    { color: red }    /* unvisited links */
a:visited { color: blue }   /* visited links   */
a:hover   { color: yellow } /* user hovers     */
a:active  { color: lime }   /* active links    */

Обратите внимание, что A: hover должен быть размещен после ссылки A: и A: visited правила, поскольку в противном случае каскадные правила скроют "цвет", свойство правила A: hover. Аналогично, поскольку A: активен после A: hover активный цвет (известь) будет применяться, когда пользователь как активируется и зависает над элементом A.

Ответ 5

Вот как это работает, и я попытаюсь объяснить, почему. Поскольку мы знаем, что CSS будет продолжать поиск документа при применении стилей и применять стиль, наиболее специфичный для этого элемента.

Пример:

li.betterList { better list styling here }

Более конкретный и перезаписывает

li { list styling here }

И эти селекторы Puesdo считаются одной и той же специфичностью, и, таким образом, последняя строка перезапишет предыдущую. Это подтверждается запиской W3Schools

Примечание:: active ДОЛЖНО наступить после: наведите указатель (если есть) в определении CSS, чтобы быть эффективным!

вы также можете бросить этот CSS на свой jsfidle и посмотреть, как он перезаписывается, так как они имеют одинаковую специфичность

.works {background: red}
.works {background: green}

Ответ 6

Это ожидаемое поведение, поскольку большинство людей всегда помещают псевдо-класс :hover в конец группы правил.

Порядок декларирования имеет значение с псевдоклассами (см. здесь: http://reference.sitepoint.com/css/pseudoclasses), поэтому окончательные правила имеют приоритет, как и другие правила в CSS.

Для большинства людей я думаю, что желаемое поведение:

a:link {
  ⋮ declarations
}
a:visited {
  ⋮ declarations
}
a:hover {
  ⋮ declarations
}

Так как :active не очень полезен, он не учитывается... или объединен с a:link и a:visited... и затем он переопределяется a:hover

W3C говорит здесь:

Обратите внимание, что A: hover должен быть размещен после ссылки A: и A: visited правила, поскольку в противном случае каскадные правила скроют "цвет", свойство правила A: hover. Аналогично, поскольку A: активен после A: hover активный цвет (известь) будет применяться, когда пользователь как активируется и зависает над элементом A.

http://www.w3.org/TR/CSS2/selector.html#dynamic-pseudo-classes

Даже W3schools получает это право:

Примечание: a: hover ДОЛЖЕН прибыть после: link и a: посещено в CSS чтобы быть эффективным!

Примечание: a: active ДОЛЖНО наступить после: наведения в определении CSS в порядке чтобы быть эффективными!

http://www.w3schools.com/css/css_pseudo_classes.asp

Ответ 7

Я думаю, вы должны хотя бы рассмотреть поток взаимодействия с пользователем по ссылкам (или кнопкам).

Обычно

• :link всегда был по умолчанию (нетронутым),
• Затем, когда пользователь указывает на кнопку, тогда в нее входит :hover.
• Как только пользователь указывает на ссылку или кнопку, он щелкнет, то есть там, где находится :active.

Это стандартная последовательность того, как мы взаимодействуем со ссылками (или кнопками). За исключением :visited, где результат становится очевидным только тогда, когда Пользователь ранее нажал ссылку.

Было бы полезно, если бы вы помнили мнемонику: L o V e HA te 'при работе с ссылками ( кроме :visited, который не работает для кнопок).

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

a:visited:active {
     color: red;   
}

Но нижняя строка, не меняйте стандартную последовательность, если она не нужна.