css - 特定の ID を持ち、クラスの一部である要素を選択する正しい方法は何ですか?

Question

私の場合、class="fusion-module rt-center" と #modlgn-remember があります。#modlgn-remember がクラス fusion-module rt-center でもある場合、これを指定してルールを作成するにはどうすればよいですか?

私は次のように考えますが、うまくいきません：

.fusion-module rt-center #modlgn-remember {
xxx:xx;
xxx:xx;
}

Answer 1

#modlgn-remember.fusion-module.rt-center { ... }

スペースは子孫セレクター用であるため、元のセレクターは、内にある要素（ここではドットがありません）#modlgn-remember内の要素を選択します。rt-center.fusion-module

また、スタイルルールを再考することを検討してください。ページにはIDを持つ要素が1つしかないmodlgn-rememberため、ルールにクラス修飾子を追加するのは冗長なようです。

Answer 2

さまざまなセレクターを一緒にチェーンする必要があります。

#modlgn-remember.fusion-module.rt-center

id="modlgn-rememberこれは、クラスがfusion-module and の の要素を検索しますrt-center。

CSS セレクター内のスペースは子孫要素を意味するため、元のセレクター ( .fusion-module rt-center #modlgn-remember) は、 の要素内にある要素id="modlgn-remember"内にある の要素を探します。rt-centerclass="modlgn-remember"

明らかに、元のセレクターが探している要素を返す可能性は低いです。

idもちろん、はドキュメント内で一意であることを忘れないでください。したがって、その特定の要素のみを取得したいid場合は、id. idセレクターをクラスセレクターと結合することが理にかなっている唯一の理由は、それらのクラスもある場合にid のみそれを選択することです。これは、特に JavaScript で役立つことがよくあります。

Answer 3

これを試して：

#modlbn-remember.fusion-module.rt-center {
   ...
}

そのIDを持つ要素を選択し、両方のクラスを割り当てる必要があります。

それを選択したい場合、それらの少なくとも1つが割り当てられている場合は、以下を使用します。

#modlbn-remember.fusion-module,
#modlbn-remember.rt-center {
   ...
}