开发者

a:visited links not following CSS rules

开发者 https://www.devze.com 2023-04-04 19:45 出处:网络
This is a problem that I\'ve been having for quite some time now. For some reason, the CSS rules for my links aren\'t working properly. As far as I can tell, when using Chrome\'s Inspect Element tools

This is a problem that I've been having for quite some time now. For some reason, the CSS rules for my links aren't working properly. As far as I can tell, when using Chrome's Inspect Element tools or FireBug, the links appear to be styled correctly, but are displayed improperly. I've added separate classes to make separate styles of links, and even tried separating a:visited, and this fixed the basic issue for each class, but the normal a tag still displays visited links the wrong color. the CSS for my links has been below.

    a:link, a:hover, a:active
    {
        text-decoration: none;
        color: #FF8C00;
开发者_高级运维        background-color: transparent;
    }
    a:visited
    {
        text-decoration: none;
        color: #FF8C00;
        background-color: transparent !important;
    }
    a.search:link, a.search:visited, a.search:hover, a.search:active
    {
        font-family: helvetica-light;
        font-size: 19px;
        color: #999;
        text-decoration: none;
        background-color: transparent;
    }
    a.nav:link, a.nav:visited,  a.nav:active, a.nav:hover
    {
        text-decoration: none;
        color: #E3E3E3;
        font-family: helvetica-light;
        font-size: 20px;
        background-color: transparent;
    }

For some reason, even though a:link/etc have "color: #FF8C00" they show up as black or dark gray when visited. Active, link and hover all work normally. All HTML is written as <a href="url">stuff</a>


Have you tried changing;

color: #999;

Into;

color: #999 !important;


This will tell the CSS parser to overwrite the #FF8C00 color to #999.
Changing the order of the CSS blocks could also give you the expected result.

Sometimes getting the look you want might require some trial and error. :)


A couple of things you could try

  • clear your browser cache
  • Make sure no other css files are been called
  • Go to w3c html validation site


I finally found the solution to my own problem. I had initially copied elements of my CSS from an older project I was working on. Somehow, an "a:visted" declaration had ended up inline with an ID declaration and didn't break the CSS, but caused the links to not appear properly.

0

精彩评论

暂无评论...
验证码 换一张
取 消