Why Does a Class Selector Override Link Pseudo-class Styles in CSS?

Why Does the .foo Selector Override Link Style Specifications?

CSS applies styles based on specificity rules. In the sample code, we define link, visited, hover, and active states with equal specificity (0 0 1 1). However, the .foo selector introduces an additional class with slightly higher specificity (0 0 2 1).

Override Mechanism

When multiple selectors with different specificity levels apply to the same element, the selector with the highest specificity overrides the lower-specificity ones. Here, .foo a:link and .foo a:visited have higher specificity than a:hover and a:active.

Therefore, the .foo selector overrides the link and dynamic pseudo-class selectors, causing links with the .foo class to appear green regardless of other styles applied.

Possible Fixes

To ensure that the hover state overrides the .foo selector, one can:

1. Add a More Specific .foo Selector

   Increase the specificity of the .foo selector by adding another class. For example:

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

   This ensures that the .link class overrides the .foo selector, allowing the hover state to take effect.

2. Use the !important Declaration

   Force the link and hover styles to override the .foo selector using the !important declaration:

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

   This effectively "locks" the color property, preventing other selectors from modifying it.

The above is the detailed content of Why Does a Class Selector Override Link Pseudo-class Styles in CSS?. For more information, please follow other related articles on the PHP Chinese website!