Question

无论我尝试做什么，我都无法修改链接的颜色（想要创建颜色翻转效果）。它们始终与下划线效果保持相同的默认蓝色。我知道它做得很小，我做错了，但是有人能告诉我吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<style type="text/css">
body,
html {
    margin:0;
    padding:0;
    color:#101010;
    font-family: helvetica;


}

p {
    margin:10px 0 0 20px;
    font-size: 13px;
    line-height: 1.3em;
    padding-bottom: 10px;

}


#wrapper {
    width:960px;
    margin:0 auto;
    padding: 0px;
    background:#fff;
}
#header {
    padding:5px 10px;
    background:#fff;
    height:518px;


}

#nav {
    padding:5px 10px;
    background:#fff;
    width: 960px;
    height: 35px;
    position: absolute;
    top: 370px;
    font-size: 18px;
    color: #000;
}
#nav ul {
    margin:0;
    padding:0;
    list-style:none;
    position: absolute;
    bottom: 5px;
}
#nav li {
    display:inline;
    margin:0;
    padding:0;
    width:160px;
    float:left;


#nav li:hover {
    background-color: #faffd8;
    border-color: #004f7b;


}

#nav a {

    color: #000;
    text-decoration: none;
}


#nav a:link {
    color: #333333;
    text-indent: -9999px;
    text-decoration: none;


}

#nav a:hover {
    color: #000000;
    text-decoration: none;



}

#nav a:visited{
    color: #999999;
    text-decoration: none;


}

#nav a:active {
    color: #000000;
    text-decoration: none;

}

#topcontent p
{
    color: #444444;

}


}
#leftcontent {
    float:left;
    width:480px;
    height: 1%;
    background:#fff;
}
h2 {
    margin:10px 0 0 20px;
    color: #24389b;
    font-size: 19px;
    padding-bottom: 8px;
}
#rightcontent {
    float:right;
    width:480px;
    background:#fff;
    height: 1%;
}
#footer {
    clear:both;
    padding:5px 10px;
    background:#fff;
}
#footer p {
    margin:0;
}
* html #footer {
    height:1px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header"><img src="pold.png" alt="Pold Logo" /></div>
<div id="nav">
    <ul>
        <li><a href="Research">Research</a></li>
        <li><a href="Research">Publications</a></li>
        <li><a href="Research">Software</a></li>
        <li><a href="Research">People</a></li>
        <li><a href="Research">Volunteer</a></li>
        <li><a href="Research">Resources</a></li>
    </ul>
</div>
<div id="topcontent">
    <p>The interests of our lab are generally centered around....</p>
</div>
<div id="leftcontent">
    <h2>Funded Projects</h2>
        <p><a href="url">The Cognitive Atlas</a><br />(funded by NIMH )<br />The Cognitive Atlas project aims to develop an ontology for cognitive processes through social collaborative knowledge building.</p>

</div>
<div id="rightcontent">
    <h2>Center Grants</h2>
    <p><a href="url">Consortium for Neuropsychiatric Phenomics</a><br />(funded by NIH)<br />This Roadmap Interdisciplinary Research Consortium is leveraging the new discipline of phonemics to understand neuropsychiatric disorders at multiple levels, from genes to neural systems to </p>

</div>
<div id="footer">
</div>
</div>
</body>
</html>

New Edit 09/27：

全部。我为两次发帖道歉 - 我在这里是全新的，并没想到继续这个帖子。如我的帖子所示（请参阅Sparky672的链接），我的列和导航问题出现了问题。请参阅此链接以获取演示http://rich2233.host22.com/pold.html ..我猜您可以从浏览器中获取代码。谢谢你的帮助

Answer 1

**#nav li {
    display:inline;
    margin:0;
    padding:0;
    width:160px;
    float:left;**


#nav li:hover {
    background-color: #faffd8;
    border-color: #004f7b;


}

#nav a {

    color: #000;
    text-decoration: none;
}


#nav a:link {
    color: #333333;
    text-indent: -9999px;
    text-decoration: none;


}

#nav a:hover {
    color: #000000;
    text-decoration: none;



}

#nav a:visited{
    color: #999999;
    text-decoration: none;


}

#nav a:active {
    color: #000000;
    text-decoration: none;

}

**#topcontent p
{
    color: #444444;

}


}**

**检查已加星标的CSS样式没有关闭第一个CSS样式也为最后一个

额外关闭

Answer 2

你在这个街区错过了大括号：

#nav li {
    display:inline;
    margin:0;
    padding:0;
    width:160px;
    float:left;

Answer 3

因为您的CSS仅指定#nav <div>中包含的链接的颜色。页面上的所有其他链接将是默认颜色/样式。

修改

虽然不确定您正在谈论哪些链接。如果您正在谈论导航链接，请查看其他人的回答，指出您的CSS中有错误的括号}。

如果您正在谈论页面上的其他链接，请参阅上面的原始答案。这些链接没有CSS。

Answer 4

我认为这与您没有正确引用ul的事实有关，但可能是错误的。无论如何看看this。

<style>
ul#navlist li{
list-style:none;
}
ul#navlist li a:link {text-decoration: none}
ul#navlist li a:visited {text-decoration: none}
ul#navlist li a:active {text-decoration: none}
ul#navlist li a:hover
{
color: #cccccc;
background-color: #003366;
border: 1px #ffffff inset;
}




</style>

<div id="navcontainer">

<ul id="navlist">
<li><a href="#">Item one</a></li>
</ul>

</div>

我从我的参考和你的例子中混合和捣碎，我认为这就是你要找的东西。哦，如果你不知道这一点，你的牙套就搞砸了。

Answer 5

你错过了一些我通过编辑你的问题修复它们的近距离}。您的代码中的另一个问题是，应按此顺序为A创建css：

a {}
a:link {}
a:visited {}
a:hover {}
a:focus {}
a:active {}

生效。只需更改您的A样式排序，它就能正常运行。

CSS不修改链接属性

5 个答案: