Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I believe it's because <code>a:hover</code> is more specific than <code>a:link</code>.</p> <p>If the original <code>a:hover</code> font-size was unspecified, it would be inherited from <code>a:link</code>. But since there is an <code>a:hover</code> specification, <code>a.myclass:hover</code> rather takes this value than the more "general" <code>a.myclass:link</code>.</p> <p>I read somewhere to think of the <code>a</code> pseudo-classes as "love hate": <code>:link</code>, <code>:visited</code>, <code>:hover</code>, <code>:active</code>, one more specific than the previous. If you define something for <code>a</code> or <code>:link</code>, it should be inherited by all the following pseudo-classes. That value can be overridden though, and the specificity of the pseudo-class is more important than the order in which the styles are defined or what other "real" classes are attached to the link.</p> <p>The reason it works differently in IE6 is that IE6 does it wrong, which shouldn't come as a surprise.</p> <p><strong>Differences in parsing (possibly backwards):</strong></p> <pre><code>a:hover { font-size: 8pt } a.myclass:link { font-size: 14px } a.myclass:hover { } </code></pre> <p><strong>How it should be:</strong></p> <blockquote> <p>Every <code>:hover</code>, regardless of <code>.class</code>, is 8pt.</p> </blockquote> <p><strong>How IE6 understands it:</strong></p> <blockquote> <p><code>:hover</code> is not in the same class as <code>.myclass:hover</code>. Since there's no size specified for <code>.myclass:hover</code>, let's inherit from the next higher available pseudo-class in the same class, which is <code>.myclass:link</code>. That makes <code>.myclass:hover</code> 14px.</p> </blockquote> <p><strong>Estimated lookup priorities:</strong></p> <pre><code>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 &lt;-- Lookup starts here, goes up. </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload