Почему селектор .foo a: link, .foo a :ited {} переопределяет селектор a: hover, a: active {} в CSS? - PullRequest
Новая
       0

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

14 голосов
/ 10 сентября 2011

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

<!DOCTYPE html>
<html>
<head>
    <title>Foo</title>
    <style type="text/css">
        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;
        }
        */
    </style>
</head>
<body>
    <div class="foo">
        <a href="http://example.com/">Example</a>
    </div>
</body>
</html>

Что я ожидал:

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

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

При наведении курсора зеленая ссылка.

Вопросы:

  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 и hover применяются к элементу A класса foo.

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

Ответы [ 3 ]

16 голосов
/ 10 сентября 2011

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

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

Обратите внимание, что указатель A: должен находиться после правил A: link и A: посещения, поскольку в противном случае каскадные правила будут скрывать свойство 'color' правила A: hover. Точно так же, поскольку A: active помещается после A: hover, активный цвет (извести) будет применяться, когда пользователь одновременно активирует и наводит курсор на элемент A.

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

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

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

4 голосов
/ 04 марта 2016

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

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

  a:link {
  color: red;
  
  }
<a href="www.stackoverflow.com">Go to stackoverflow </a>

Элемент привязки окрашен в красный цвет в следующих состояниях тогда и только тогда, когда ссылка не посещена,

  • не посещено
  • завис
  • Сфокусировано (с вкладками)
  • Активно (щелкнуло)

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

a:hover {
  color: red;
  
}
<a href="www.stackoverflow.com">Go to stackoverflow </a>

Элемент привязки окрашен в красный цвет в следующих состояниях:

  • hovered
  • Active (нажат)

Мы видим, что оба псевдокласса :link и :hover способны определять состояние hover - поэтому, если вы назначите эти два псевдокласса конкретному элементу, тогда тот, который упоминается впоследний в файле CSS выигрывает.По этой причине мы говорим, что :link переопределит :hover, если первое упомянуто ниже, а позднее.То же самое относится и к другим псевдоклассам.Я хотел бы дать список того, что делает каждый псевдокласс.

a:link {...} устанавливает следующие состояния невидимой ссылки
- Focused (Tabbed)
- hovered
- Активно (нажата)

link состояние переопределяет все остальные состояния.

a:visited {...} устанавливает следующие состояния посещенной ссылки:
- Фокусировка (с вкладками)
- зависание
- Активно (щелкнуло)

a:visited {...} переопределит все остальные состояния, кроме :link , если и только если ссылка была посещена .

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

a:focus {...} устанавливает следующеесостояния как для посещенных, так и для невидимых ссылок:
- Сосредоточено (с вкладками)
- наведено
- Активно (нажато)

a:focus {...} переопределяет :hover и :active состояния.

a:hover {...} устанавливает следующие состояния для посещенных и не посещенных ссылок:
- зависание
- активное (нажатие)

a:hover {...} переопределение:active state

a:active {...} устанавливает следующие состояния как для посещенных, так и для невидимых ссылок:

  • Active (Clicked)
0 голосов
/ 10 сентября 2011

Чтобы исправить это, сначала поместите селектор .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.(то же самое для :visited.) Таким образом, селектор .foo ... всегда будет переопределять селектор a:link,a:visited, потому что у него есть имя родительского класса, поэтому он более конкретен.
(Также прочитайте ответ @ BoltClock о LoVe - HAte - эточасть проблемы.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...