ナビゲーションバーのスタイルを設定するときのCSSスタイル

Question

最近、私の最初のウェブサイトのナビゲーションに取り組んでいますが、：linkと：hover擬似クラスについて、どのスタイルがどこに向かうのかかなり混乱しています。ここで

がより良い説明のために私のコードです：

#header_nav ul li { 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    display: inline-block; 
    position: relative; 
    text-align: left; 
    text-decoration: none; 
    border-right: 1px solid #000; 
} 

#header_nav ul li a:link, #header_nav ul li a:visited { 
    list-style-type:none; 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    text-align: left; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

#header_nav ul li:hover a { 
    list-style-type:none; 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #B40000; 
    background-color: #FFF; 
    text-align: left; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

あなたが見ることができるように、いくつかの追加や除外を除き、IDのすべての3のコードは同じです。これは、個々にスタイルを設定しようとするとランダムな結果が出てしまったためです。何も見落とさないように、何度も何度も簡単に複製できることがわかりました。しかし、StyleSheetが拡大するにつれて、新しいページで

私はあなたの経験豊かな開発者に質問しています。リンクをカスタマイズするときにどのようなCSSスタイルを使うべきですか？

おかげで、

ウィル

Answer 1

は挙動がほとんどおそらくあなたのリンクに適用される、他のCSSルールに依存しています。したがって、「ランダムな結果」が表示された場合は、Webインスペクタで他のルールを調べると、ルールセットが上書きされる可能性があります。

いくつかのヒントは：

• list-style-type: none;が<a>タグには意味がない、それだけでそれはおそらくあなたの場合のみ<a>タグ
• ためtext-decoration: none;を設定するのに十分だ<ul>または<ol>
• に適用されますすべてのルールを複製する必要はありませんが、子タグにルールが必要です。inherit

次のように私は（未テスト）あなたのコードを記述します。それらを持ってする必要がない場合

#header_nav ul li { 
    font-family: "Futura Bk BT"; 
    font-size: 26px; 
    color: #FFF; 
    display: inline-block; 
    position: relative; 
    text-align: left; 
    border-right: 1px solid #000; 
} 

#header_nav ul li a:link, 
#header_nav ul li a:visited { 
    font-family: inherit; 
    font-size: inherit; 
    color: inherit; 
    display: inline-block; 
    position: relative; 
    text-decoration: none; 
    padding: 9px 35px; 
} 

#header_nav ul li:hover a { 
    color: #B40000; 
    background-color: #FFF; 
} 

マークアップによって、あなたは、<a>タグに直接font-family、font-sizeとcolorようなルールを設定することができます<li>にあります。