html - 複数のクラスを持つ要素を選択するには、どのような CSS セレクターを使用できますか?

Question

私は次のHTMLを持っています:

<div class="block-content no-title grey-bg">

この div の背景を #333 の色に設定するにはどうすればよいですか?

gray-bg を持つブロック コンテンツ div だけを選択するために使用できる CSS セレクターはありますか?

Answer 1

あなたの質問には奇妙なところがあります。
これ：

この div の背景を #333 の色に設定するにはどうすればよいですか?

このセレクターが必要であることを示します[.grey-bg][.no-title][.block-content](角括弧内の 1 つ以上の部分を使用します)。
これ：

gray-bg を持つブロック コンテンツ div だけを選択するために使用できる CSS セレクターはありますか?

これが必要であることを示します: .grey-bg.block-content。

Answer 2

css では、セレクター間のスペース (またはその欠如) は、子孫または同じ dom オブジェクトのいずれかを示します。

<span class="a b">
    <span class="c"></span>
    <span class="b"></span>
</span>

// CSS セレクターの例

.a.b{} //gets the first span (get all elements which have class .a and .b)
.a .b{} //gets the third (nested in a.b after .c - get all .b that are descendants of .a)
.b{}   //gets the first and third (get all .b)
.b>.b{} //gets the third (get all direct descendants of .b which are .b)
.b>.c+.b{} //gets the third (next sibling .b of a .c which is direct descendant of a .b)