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 part をa:link、a:visitedから分離し、すべてのリンクではなく nav リンクだけに色を割り当てることもできます。

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;
}