css - 複数のクラスで同じ CSS ホバー

Question

次のクラスには、まったく同じ css ルールが適用されていました。これら 3 つを 1 つに設定する方法でしょうか。

#menuHolder .l1 a:hover
#menuHolder .l2 a:hover
#menuHolder .l3 a:hover

これまでのところ、私は運が悪かった:

#menuHolder .l1, l2, l3 a:hover
#menuHolder .l1 l2 l3 a:hover
#menuHolder .l1 a:hover, .l2 a:hover, .l3 a:hover

ありがとうございました！

Answer 1

クラスを指定する必要がありますか？

ちょうどどうですか：

#menuHolder a:hover{}

Answer 2

#menuHolder .l1 a:hover,
#menuHolder .l2 a:hover,
#menuHolder .l3 a:hover {
    ...
}

Answer 3

いいえ。唯一の方法は次のとおりです。

#menuHolder .l1 a:hover, #menuHolder .l2 a:hover, #menuHolder .l3 a:hover {
    ...
}

ただし、3つすべてに一般的なクラスを提供してから、次のようにする必要があります。

#menuHolder .hoverable a:hover {
    ...
}

Answer 4

#menuHolder .l1 a:hover, #menuHolder .l2 a:hover, #menuHolder .l3 a:hover
{

}

常に同じスタイルを持つクラスがある場合は、同じスタイル セットのコンマで区切ることができます。

ただし、これが頻繁に発生する場合は、HTML デザインを調べて、毎回同じクラスを呼び出すように整理できるかどうかを確認する価値があります。

たとえば、.l1、.l2、.l3が同じである場合、クラスを次のように置き換え.lて、CSS を次のようにします。

#menuHolder .l a:hover
{

}

Answer 5

 #menuHolder .l1 a:hover, #menuHolder .l2 a:hover, #menuHolder .l3 a:hover
 {

 }