CSS!リンク状態ごとに同じプロパティを繰り返す必要がありますか? (リンク、訪問、ホバー…など)?

StackOverflow https://stackoverflow.com/questions/1616034

  •  06-07-2019
  •  | 
  •  

質問

各リンクタイプで変化しないプロパティを繰り返すことは必要ですか、それとも悪い習慣ですか? このように:

a:link {display: block; width: 50px;}
a:visited {display: block; width: 50px; color: #000;}
a:hover {display: block; width: 50px; color: #FFF}
a:active {display: block; width: 50px; color: #FFF}

それぞれに表示ブロックが必要ですか?それとも悪い習慣ですか? また、リンク状態をチェーンできますか? このように:

a:hover, a:active {display: block; width: 50px; color: #FFF}

さらに、リンクに追加されたID /クラスがある場合、最初にデフォルトのスタイルを継承し、次に特定のID /クラスに変更する必要がありますか? このように:

a:link {display: block; width: 50px; color: #000;}
....(etc)
a.menu:link {color: #FFF;}
....(etc)

.menuリンクは、a:linkから表示と幅を取得し、色を変更するだけですか?

これをすべて解決してくれてありがとう!

役に立ちましたか?

解決

リンク状態をチェーンできます。

:linkおよび:visitedは、リンクの最も基本的な定義です。リンクにクラスやIDがある場合でも、それらのステートメントはページ上のすべてのリンクに表示されます。

:linkと:visitedで宣言した場合、:hoverと:activeはdisplay:blockを必要としません。

他のヒント

プロパティを繰り返す必要はありません。「悪い習慣」かどうかはわかりません。それ自体は間違いなく最適化できるものです。

{display:block; width:50px}そして、これはすべての状態をカバーします(別の場所に別の設定がされていない限り。そして、はい、状態を連鎖することもできるはずです。

その通りです。要素タイプに割り当てられたスタイルを継承しますが、設定されている場合はid / class name変数が優先されます。

ベンの答えに従ってください:

a{ display:block; width: 50px }
a:hover, a:active{ color: #fff; }
a:visited{color: #000}
ライセンス: CC-BY-SA帰属
所属していません StackOverflow
scroll top