链接字体颜色问题答案

【问题标题】：Link Font Color Problem [closed]链接字体颜色问题
【发布时间】：2011-08-18 11:49:27
【问题描述】：

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

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

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

如何区分这些不同的样式？

谢谢！

【问题讨论】：

标签： css colors hyperlink styles targeting

【解决方案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 分开，并为导航链接分配颜色，而不是全部链接。

【讨论】：

+1 用于命名他的 CSS 文件。如果告诉他们它也在第 14 行，您本可以得到奖励积分：p

【解决方案2】：

原因是你在<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;
}

【讨论】：

【解决方案3】：

您的 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... }

【讨论】：