这是我的网站。http://www.gtaresources.net/
css使锚元素具有一定的css属性，我只是想让它像导航栏。只是登录按钮，当我添加一个菜单。但现在你可以看到右上角的绿色。它不应该去后面的每一个锚，我只是想要它的某些，我不能或不知道如何做内联css只有与a:访问和a:悬停和东西的菜单。解决办法是什么?我只需要让一些css只适用于某些元素或元素。
我记下了干扰css的开始和结束位置。
来源:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>GTA Resources</title>
<style type="text/css">
html
{
background-color: #003300;
padding-right: 11%;
padding-left: 11%;
}
body
{
background-color: black;
}
#p
{
color: white;
}
#para
{
color: white;
padding-right: 2%;
padding-left: 2%;
}
a
{
color: #003300;
}
.logo
{
padding-top: 4px;
padding-left: 4px;
}
ul { <!-- Css that is interferring begins -->
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #98bf21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
a:hover, a:active {
background-color: #7A991A;
} <!-- Css that is interferring ends -->
</style>
<script type = "text/javascript">
function validate() {
var un = document.myform.username.value;
var pw = document.myform.pword.value;
var valid = false;
var unArray = ["admin"];
var pwArray = ["password"];
for (var i=0; i <unArray.length; i++) {
if ((un == unArray[i]) && (pw == pwArray[i])) {
valid = true;
break;
}
}
if (valid) {
alert ("Logged In.");
window.location = "/victoria/logged_in.html";
return false;
}
}
</script>
</head>
<body>
<ul background="/victoria/cutiepie2.jpg" hidden>
<li><a href="/scripts/call.php" id="blue">Call</a></li>
<li><a href="/scripts/text.html" id="blue">Text</a></li>
<li><a href="/menu/home.html" id="blue">Home</a></li>
<li><a href="/menu/news.html" id="blue">News</a></li>
<li><a href="/menu/media.html" id="blue">Media</a></li>
<li><a href="/menu/downloads.html" id="blue">Downloads</a></li>
<li><a href="/menu/forum.html" id="blue">Forum</a></li>
</ul>
<a href="/index.html"><img src="/victoria/logo.jpg" width="250" height="75" class="logo"></a>
<ul style="list-style-type: none;margin: 0;padding: 0;overflow: hidden;position: absolute;top: 4px;right: 4px;">
<li style="float: left;"><a style="display: block;width: 120px;font-weight: bold;color: #FFFFFF;background-color: black;text-align: center;padding: 4px;text- decoration: none;text-transform: uppercase;" href="/victoria/logged_in.html">Log in</a></li>
</ul>
<form name = "myform" style="position: absolute; top: 0;right: 0;" hidden>
<p id="p">Username: <input type="text" name="username">
Password: <input type="password" name="pword">
<input type="button" value="log in" onclick= "validate()"></p>
</form>
<center><h1 style="color: #003300;">GTA Resources</h1></center>
<center><img src="http://i1-news.softpedia-static.com/images/news2/Call-of-Duty-Ghosts-Publisher-Wants-to-Break-GTA-5-Sales-Record-Soon-392209-2.jpg"
width="1000" height="500"></center>
<br><br>
<p id="para">
Welcome to Gta Resources. This is a site all about gta, the cheats, mods, and videos of within it. From hiliarous videos to
videos of how to make, convert, and import mods into gta. This site has everything. Right now it focuses on Gta 5 but in the future it will have topics on all
the other Gta's too. This site will have media on the Mods for example, details in a description, videos on and how to do them, and download links, unless
there is no link. Then I will try my best to give information on it, and where you might be able to get it. There will be a forum soon for discussing topics
on anything Gta related. And just have a good time. Enjoi!!:)
</p>
<center><a href="/victoria/click_here_for_help.html">Click here for help</a></center>
<p id="p" style="text-align: right;">GTA Resources(c) 2014</p>
</body>
<!--MTD(c) 2014-->
</html>
要做到这一点，干净的方法是使用CSS类。在你的HTML中，给css元素添加一个类，它应该有绿色的背景。
HTML:<a href="#" class="green-on-hover">my link</a>
a.green-on-hover:hover {
background-color : green;
}
注意:类名就像变量名一样，可以是任何东西，甚至可以在类名中使用"连字符"。我给出了"绿色盘旋"，你想叫它什么都可以。找到这个非常简单的教程来帮助你上课:http://www.tizag.com/cssT/class.php
希望有帮助。如果有什么问题请告诉我。
一个建议:下次试着让你的问题更一般一些。
你用绿色作为锚点的背景，然后把图片放进去，你就可以看到你的结果了。
试试这个
html:
<a href="/index.html">
<img width="250" height="75" class="logo" src="/victoria/logo.jpg">
<span></span>
</a>
a,a:link, a:visited {
color: #ffffff;
position:relative;
display: block;
font-weight: bold;
padding: 4px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 120px;
}
a span{
position:absolute;
width:100%;
height:100%;
background-color:#98bf21;
z-index:2;
left:0;
top:0;
}
a img{
position:relative;
z-index:0;
}