Why Does `.foo a:link` Override `a:hover` in CSS Specificity?

CSS Selector Specificity Puzzle: Why .foo a:link Overrides a:hover

In the realm of CSS, selector specificity can be a bit of a mind-bender. Let's dive into an interesting puzzle that demonstrates how the .foo a:link selector can override the more specific a:hover and a:active selectors.

Problem Definition

Consider the following code:

<div class="foo">
    <a href="#">Example</a>
</div>

a:link, a:visited {
    color: blue;
}

a:hover, a:active {
    color: red;
}

.foo a:link, .foo a:visited {
    color: green;
}

The expectation is that hovering over the link should turn it red, but instead, it remains green. This puzzling behavior requires a closer examination of the CSS cascade.

Specificity in CSS

Specificity determines the order in which CSS rules are applied to an element. A higher specificity wins out over a lower specificity. The following formula calculates specificity:

• Inline styles: 1, 0, 0, 0
• ID selectors: 0, 1, 0, 0
• Class selectors: 0, 0, 1, 0
• Pseudo-classes and pseudo-elements: 0, 0, 0, 1

Selector Specificity in the Puzzle

Calculating the specificity of our selectors:

• a:link, a:visited, a:hover, a:active: 0, 0, 1, 1
• .foo a:link, .foo a:visited: 0, 0, 2, 1

As you can see, the .foo a:link and .foo a:visited selectors have a higher specificity than the a:hover and a:active selectors (2 > 1).

Conclusion

The reason for the surprising behavior is that the .foo a:link and .foo a:visited selectors have a higher specificity than the a:hover and a:active selectors. This means that even though a:hover and a:active are more specific in terms of their pseudo-classes, the .foo selector's class specificity wins out.

To correct this issue, the fix suggested in the problem (uncommenting the .foo a:hover and .foo a:active rules) is necessary. By adding these rules with the same specificity as the .foo a:link and .foo a:visited rules, the a:hover and a:active styles will now take precedence.

The above is the detailed content of Why Does `.foo a:link` Override `a:hover` in CSS Specificity?. For more information, please follow other related articles on the PHP Chinese website!