Почему .foo a: link, .foo a: visited {} селектор переопределяет: hover, a: active {} селектор в CSS?

Пример кода: http://jsfiddle.net/RuQNP/

   Foo  a:link, a:visited { color: blue; } a:hover, a:active { color: red; } .foo a:link, .foo a:visited { color: green; } /* A possible fix */ /* .foo a:hover, .foo a:active { color: red; } */       

То, что я ожидал:

Ссылка будет красной при наведении.

Что я получаю:

Ссылка отображается зеленым цветом при наведении.

Вопросов:

  1. Почему color определенный в селекторе .foo a:link, .foo a:visited , переопределяет значение в a:hover, a:active ? Что происходит?
  2. Я понимаю, что могу исправить это и получить то, что ожидаю, раскомментируя прокомментированный код. Тем не менее, я хочу знать, как мы можем исправить селектор .foo a:link, .foo a:visited , чтобы он не переопределял color определенный в a:hover, a:active ?

Если я правильно понимаю http://www.w3.org/TR/CSS21/cascade.html#specificity (Спасибо, BoltClock), это таблица спецификаций для различных селекторов в коде.

 a:link - 0 0 1 1 a:visited - 0 0 1 1 a:hover - 0 0 1 1 a:active - 0 0 1 1 .foo a:link - 0 0 2 1 .foo a:visited - 0 0 2 1 

Таким образом, стиль, определенный для .foo a:link переопределяет стиль для a:hover когда как link так и псевдо-classы hover применяются к элементу classа foo .

Аналогично, стиль, определенный для .foo a:visited переопределяет стиль для a:hover когда как a:hover так и visited применяются к элементу classа foo .

Когда вы впервые начали использовать CSS, вы, возможно, узнали о мнемонике LoVe-HAte для того, чтобы указать, какие селекторы ссылок ( a:link , a:visited , a:hover , a:active ). Вы когда-нибудь задумывались, почему эта мнемоника была выбрана?

Ну, в спецификации есть примечание о том, как обрабатываются ссылки и динамические псевдоclassы, когда к одному элементу применяются несколько правил, использующих все из них, что объясняет, почему вам нужно установить селектор ссылок в следующем порядке:

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

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

Теперь простое введение селектора .foo приводит к тому, что ваш второй набор правил ссылок / посещений переопределяет ваш первый набор стилей ссылок / посещений и стилей hover / active, заставляя ссылки в элементах с этим classом всегда отображаться зелеными, пока вы не добавите зависание / активные стили с помощью селектора .foo .


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

Вот как я это понимаю. Все эти псевдо classы имеют одинаковую специфичность, поэтому, наконец, побеждает псевдоclass. Теперь, что делают псевдоclassы :link, :visited, :focus, :hover, :active do? Давайте посмотрим один за другим.

a: link{color: red} указывает агенту пользователя на цвет красного элемента привязки в любом состоянии . Запустите следующий скрипт:

  a:link { color: red; } 
 Go to stackoverflow  

Чтобы исправить это, сначала поставьте селектор .foo ... и добавьте !important цвета для другого селектора ссылок / посещений, например:

  a:link, a:visited { color: blue; } a:hover, a:active { color: red !important; } .foo a:link, .foo a:visited { color: green; } 

Причина, по которой селектор .foo a:link, .foo a:visited переопределяет другой селектор, независимо от того, где вы его помещаете, это потому, что .foo a:link более конкретна, чем a:link (ditto for :visited .) Поэтому селектор .foo ... всегда будет переопределять селектор a:link,a:visited , поскольку он имеет имя родительского classа, поэтому он более конкретный.
(Также читайте @ ответ BoltClock о LoVe – HAte – это часть проблемы.)

  • Могу ли я иметь несколько: перед псевдоэлементами для одного и того же элемента?
  • Вложенные classы CSS
  • nth-child не отвечает classу
  • Как получить n-й дочерний элемент с помощью селекторов CSS2?
  • Могу ли я использовать переменные для селекторов?
  • Селектор CSS для <input type = "?"
  • Как я могу выбрать элемент с несколькими classами в jQuery?
  • Может ли псевдоclass classа not () иметь несколько аргументов?
  • Выбор пустого ввода текста с помощью jQuery
  • Как совместить class и идентификатор в селекторе CSS?
  • Как выбрать все содержимое между двумя тегами в jQuery
  • Давайте будем гением компьютера.