css - 各リンクの色の状態を指定する必要がありますか?

Question

次の疑似クラスを使用しています。

a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}

私はそれほど明示的である必要がありますか、それとも同じ結果を得るためのより圧縮された方法はありますか?

Answer 1

いいえ、省略形はありません。ただし、セレクターは次のようになります。

a {}

すべてを選択するにはlinks、または:

.recentposttitle {}

すべての.recentposttitle要素を取得します (それらが既にリンクであることはわかっています)。

---

もう1つ:linkは、実際には必要ありません。次のように書くことができます。

a {}
a:visited {}
a:hover {}
a:active {}

を記述a {}すると、考えられるすべての状況に対して宣言を設定することになるため、次のようになります。

a {}

以下と同一です:

a:link, a:visited, a:hover, a:active {}

• そして、次の順序pseudo classesが重要であることを覚えておいてください。
  • : lインク
  • :訪問した
  • :時間オーバー
  • :アクティブ_
• または、単にL o V e HA te を思い出してください。

Answer 2

LESSまたはのような CSS フレームワークを使用して圧縮できますSASS。

あなたの例のように、

CSS:

a.recentposttitle:link,a.recentposttitle:visited {color:#000;}
a.recentposttitle:hover {color:#56A49F;}
a.recentposttitle:active {color:#000;}

たとえば、SASSを使用する場合は、次のように圧縮できます。

a.recentposttitle {
  color: #000;
  &:link{ color: #000; }
  &:hover { color: #56A49F; }
  &:visited { color: #000; }
  &:active{ color: #000; }
}

を使用することもできます。これはEmmet、以前Zen codingは最大コード圧縮と呼ばれていました。

お役に立てれば。