How come the links in my footer section remain purple and underlined even when I use CSS to change that
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.
加载中,请稍侯......
精彩评论