开发者

How come the links in my footer section remain purple and underlined even when I use CSS to change that

开发者 https://www.devze.com 2023-03-15 02:15 出处:网络
I\'ve spent hours on this, but even though I was able to manipulate the links the first time I used them in my code it would seem that the links on my footer won\'t change no matter what I do...

I've spent hours on this, but even though I was able to manipulate the links the first time I used them in my code it would seem that the links on my footer won't change no matter what I do...

any advice/hint/solution would be appreciated...

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML     4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>usaelectricalsystemshome</title>
<style type="text/css" media="screen, print, projection">
body{
    background: black;
}
#wrap {
    width:1000px;
    margin:0 auto;
    background: blue;
}
#alldivs{
}
#header{ 
    background: blue;
}
#nav{
    background: yellow;
    padding: 0px;
    margin: 0px;
    background:blue repeat-x;
    width:100%;
    float:left;
    border: 1px solid #42432d;
    border-width:1px 0;
}
#nav li{
    display: inline;
    padding: 0px;
    margin: 0px;
}
#nav a:link,
#nav a:visited {
    color:#000;
    background:#FFFFF0;
    float:center;
    width:auto;
    border-right:1px solid #42432d;
    text-decoration:none;
    font:bold 1em/1em Arial, Helvetica, sans-serif;
    text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
    color:#fff;
    background:blue;
}
#main{
    background: white;
    float: left;
    width: 800px
}
#sidebar{
    background: gray;
    float: right;
    width: 200px;
}
#footer{
    background: blue;
    clear: both;
}
#footernav a:link{
    color:gray;
    text-decoration: none;
}
#footernav li{
    display: inline;
    color: gray;
    text-decoration: none;
}

</style> 
</head>



<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><p>This is the header, put something here!!</br>safsdf</p></div>
<ul id="nav">
<li id="home"><a href="link">HOME</a></li>
<li id="services"><a href="link">SERVICES</a></li>
<li id="contact"><a href="link">CONTACT</a></li>
</ul>
<div id="main"><p>
MAIN CONTENT
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<p>
this is the footer
</p>
<ul id="footernav">
<li id="footerhome"&开发者_如何学运维gt;<a href="link">HOME</a></li>
<li id="footerservices"><a href="link">SERVICES</a></li>
<li id="footercontact"><a href="link">CONTACT</a></li>
</ul>
</div>
</div>
</div>



</body>
</html>


You need:

#footernav a:link, #footernav a:visited {

Remember, links are either :link, or :visited, never both.


Your syntax is off:

a { color:gray } /* <a href="#">Foo</a> */

This will change the link color (affects visited links as well):

a:hover { color:green } /* <a href="#">Foo</a> */

This will change it when hovered.


try #footernav li a:link not #footernav a:link Your traverse through the DOM seems off.


Try adding a:visited { color:#000;} between the style tag.

0

精彩评论

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