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：链接分开，a：访问，并为导航链接分配颜色，而不是全部链接。

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写

#header a h1{
color: yellow;
}

链接字体颜色问题

3 个答案: