по умолчанию a: hover переопределяет классы ie6

Question

У меня есть стиль по умолчанию a: hover, как показано ниже:

a:hover { color: black; font-size: 8pt }

Однако при попытке применить такой класс, как:

a.myclass:link { font-size: 14px } 
a.myclass:hover { color: red }

без размера шрифта, тогда он меняет размер шрифта обратно на 8pt. Теперь это похоже на то, как это должно работать, однако это не происходит в ie7, Firefox, Chrome. (Это работает в IE6)

Обновление . В firebug он фактически показывает размер шрифта на: hover, но я ничего не знаю.

У кого-нибудь есть идеи?

Answer 1

Я полагаю, это потому, что a: hover более конкретен, чем a: link .

Если исходный размер шрифта a: hover не указан, он будет унаследован от a: link . Но поскольку существует спецификация a: hover , a.myclass: hover скорее принимает это значение, чем более " общий " <Код> a.myclass. Ссылка

Я где-то читал, чтобы подумать о псевдоклассах a как "любовь ненавидит": : ссылка , : посещенный , : hover , : active , более конкретный, чем предыдущий. Если вы определите что-то для a или : link , это должно быть унаследовано всеми следующими псевдоклассами. Однако это значение может быть переопределено, и специфичность псевдокласса важнее, чем порядок, в котором определены стили или какой-либо другой «реальный» тип. классы прикреплены к ссылке.

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

Различия в разборе (возможно, в обратном направлении):

a:hover { font-size: 8pt }
a.myclass:link { font-size: 14px } 
a.myclass:hover { }

Как это должно быть:

  

Каждый : hover , независимо от .class , равен 8pt.

Как IE6 это понимает:

  

: hover не относится к тому же классу, что и .myclass: hover . Поскольку для .myclass: hover не указан размер, давайте унаследуем от следующего более доступного псевдокласса в том же классе, который является .myclass: link . Это делает .myclass: hover 14px.

Предполагаемые приоритеты поиска:

Others            IE6

a                 a
a.class           a:link
a:link            a:hover
a.class:link      a.class
a:hover           a.class:link
a.class:hover     a.class:hover   <-- Lookup starts here, goes up.

Answer 2

Вот из-за того, как применяются стили если бы вы расширили классы, вы бы получили:

a{ color:red; font-size:10pt;}
a:hover {font-size:8pt; color:black}
a.myclass{font-size:6pt;text-decoration:none;}
a.myclass:hover {color:red}

Теперь, если мы расширим это, чтобы показать, что происходит:

a.myclass{font-size:6pt;text-decoration:none;**color:red**} /* got the color from a - we overrode the font size */
a.myclass:hover {color:red;text-decoration:none;font-size:8pt} /* we got the text-decoration from a.myclass - but a:hover overrides myclass so we got the 8pt from there */

этот эффект на самом деле еще более странный и более сложный, если в таких созвездиях вы начнете смешивать все окружающие эффекты (border / padding / margin) и только боковые (border-right; margin-top; padding-left).