Universal selector overrides :link and :any-link:active (CSS)-CodePudding

How come the universal selector (*) overrides the Firefox browser's default styles for the :link and :any-link:active pseudo-class selectors, though it has a specificity of 0?

*{color: red} beats :any-link:active{color:activetext}and :link{color: linktext} set by Firefox.

It's the same with Chrome by the way.

CodePudding user response：

The Universal Selector is a simple selector and is usually set as a "last resort"/ fallback for CSS compilers.

With testing, on Firefox, I DO NOT SEE in my own codes and example below that * beats either of the pseudo-classes you reference.

:any-link {
  color: brown;
  font-weight:bold;
}

* {
  color: blue;
}

<body>
<div>horses and trees <a href='https://webzoom.freewebs.com/schazaars/11612 indian horses 052.JPG'>whoopieee!</a></div>
</body>

See the example above shows that the anchor is a different colour from the rest of the text, which is expressedly opposite to what you claim, that the * element overrides the pseudo-class.

Also note that cascade doesn't effect this; it's to do with the specificity of the elements themselves.

CodePudding user response：

you can use

@-moz-document url-prefix() {
 a {
     color: red;
   }
}

as firefox has its own set of default CSS in the browser.