css - 链接字体颜色问题

Question

我一直在处理我一直在处理的模板上的链接的字体颜色问题。请看一下代码：

http://www.wendyhenrichs.com/prob/

您会注意到标题链接的颜色与导航栏上的链接颜色相同。

我怎样才能区分这些不同的风格？

谢谢！

Answer 1

将 main.css 文件编辑为

#header h1 {
    color: #000000;  // <-- your new title color
    font-family: 'News Cycle',arial,serif;
    font-size: 6em;
    font-weight: bold;
    letter-spacing: 2px;
    padding-bottom: 5px;
    text-shadow: 1px 1px 1px #CCCCCC;
}

您在选择器下拥有所有链接：

#nav ul li a, a:link, a:visited {
color: blue;
font-family: 'Smythe',serif;
font-size: 26px;
font-style: normal;
font-weight: 400;
letter-spacing: 0;
line-height: 1.2;
text-decoration: none;
text-shadow: 2px 2px 2px #AAAAAA;
text-transform: none;
word-spacing: 0;
}

您还可以将#nav ul li a部分与a:link、a:visited分开，并为导航链接而不是所有链接分配颜色。

Answer 2

您的 CSS 在这两种情况下都使用 a:link 和 a:visited

#nav ul li a, a:link, a:visited {
    color: white;
    font-family: 'Smythe',serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: 2px 2px 2px #AAAAAA;
    text-transform: none;
    word-spacing: 0;
}

#header h1 a, a:link, a:visited {
    color: #000000;
    text-decoration: none;
}

您可以将它们分开

#nav ul li a, #nav ul li a:link, #nav ul li a:visited { // nav link style ... }

和

#header h1 a, #header h1 a:link, #header h1 a:visited { // header link style... }

Answer 3

原因是你在<a>标签中给出颜色

#nav ul li a, a:link, a:visited {
    color: white;
    font-family: 'Smythe',serif;
    font-size: 26px;
    font-style: normal;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.2;
    text-decoration: none;
    text-shadow: 2px 2px 2px #AAAAAA;
    text-transform: none;
    word-spacing: 0;
}

用于覆盖上面的 css write

#header a h1{
color: yellow;
}