cannot override webkit-any-link

Question

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

I can't override this css. I tried this post Blue lines under links on my site even though I've disabled all related CSS? I tried a lot. Still its not working. I don't want to modify each and every machine to change the user agent stylesheet. Please help.

Answer 1

if you are saying that the styling

a:-webkit-any-link {
    color: -webkit-link;
    text-decoration: underline;
    cursor: auto;
}

is being set automatically somehow and you want to override it, start by simply setting anchor styling in your CSS:

a, a:link, a:visited, a:focus, a:hover, a:active{
  color:olive;
  text-decoration:none; 
  cursor: crosshair;
}

If this doesn't work for some reason, add additional selectors to increase the specificity of your rule, eg

body a{
   ...
}  

if this still doesn't work, use the dreaded !important

color:olive !important;

see this live:https://jsfiddle.net/panchroma/z7mkvbeu/

Good luck!

Answer 2

The specificity David has warned you about is key to overriding rules, when all code is right. Without seeing your code, I cannot know if this applies to you, but to other coders to land here: please double check your rule. It is very likely that you have a typo on your rule, causing it not to be recognized and the default to be applied.