Какой правильный путь? CSS Link Псевдокласс - PullRequest
Новая
       2

Какой правильный путь? CSS Link Псевдокласс

3 голосов
/ 17 ноября 2011

Я только что нашел это:

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

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

Примечание : Имена псевдоклассов не чувствительны к регистру.

Значит ли это, что это НЕПРАВИЛЬНО ? 

a:link, a:visited, a:active {
color: #006699;
text-decoration: none;
}

a:hover {
color: #2089CC;
text-decoration: underline;
}

К сожалению, источник: http://www.w3schools.com/css/css_pseudo_classes.asp

Если вы не знаете, почему «к сожалению», пожалуйста, посетите http://w3fools.com

Ответы [ 3 ]

4 голосов
/ 17 ноября 2011

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

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

То, что у вас есть правильно 

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

Вот почему это работает.

Это ниже будет неправильно. 

a:hover {
   color: #2089CC;
   text-decoration: underline;
}

a:link, a:visited, a:active {
   color: #006699;
   text-decoration: none;
}

Вот почему это не работает.

3 голосов
/ 17 ноября 2011

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

Например, псевдокласс :active стоит последним, так что он переопределяет псевдоклассы :focus или :hover перед ним.,Это имеет смысл, если вы думаете, что ссылка становится активной при нажатии, и вы хотите, чтобы новый стиль применялся, пока пользователь все еще наводит курсор на ссылку с помощью курсора.

Настоящий порядок выглядит следующим образом: 

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

Вот вам небольшое заверение для вас.

1 голос
/ 17 ноября 2011

Из спецификации CSS 2.1 для динамических псевдоселекторов :

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

Интересно, что текущий CSS3В проекте спецификации это, похоже, не упоминается (или, по крайней мере, не так четко).

...