CSSでこのHTMLをどのようにターゲットにするのですか？

Question

私はバニラ・フォーラムをスタイリングしようとしています。このクラスを選択することはできません。<li class="Item Announcement"></li>私はそれをスタイルすることができます。

なぜそれが難しいのか分かりません。なぜこれはうまくいかないでしょうか？

.Item Announcement { 
background-color: #FFF; 
{ 

Answer 1

試してみてください。

li.Item.Announcement { 
    background-color: #FFF; 
} 

リスト項目がそれに適用された2つのクラス（項目と発表）を持っていること。だから、CSSでそれをターゲットにするには、各クラスの前にピリオドをつけて、スペースを削除する必要があります。スペースをCSSセレクタに残すと、そのクラスを持つ子孫要素に適用されます。

クイックjsFiddle exampleです。

Answer 2

スペースでは、セレクタは1つではなく2つで、複数のクラスセレクタを使用して選択する必要があります。

.Item.Announcement { 
    background-color: #FFF; 
} 

Answer 3

あなたの問題は、クラス名にスペースがあることです。おそらく、それが単一のクラス名であることを意味していたので、class="ItemAnnouncement"と.ItemAnnouncement { ...に変更してください。すべて動作します。

Answer 4

あなたのクラス名にスペースがある場合、html要素に2つの異なるクラスが追加されます。.Item & .AnnouncementあなたのクラスitemAnnouncementに名前を付けることを考慮する必要があります。もしあなたがラクダのケースのファンでなければ、item-announcementです。

一方、あなたは別のクラスを持っていることを意図した場合、あなたがスペースあなたを置くので、もしあなたが、クラス名とidで

.Item {background-color:#fff;} 

Answer 5

スペースは許可されていない最高のあなたに合ったもの、すなわちのスタイルをすることができます実際にはその項目の2つのクラス名を記述しています。

Answer 6

<li class="Item Announcement"></li>は、実際には2つのクラスです。クラスには名前にスペースを入れることはできません。この要素は、li、.Item、.Announcement、またはこれら3つの組み合わせのいずれかで選択できます。

あなたはその正確な要素を選択していることを確認するために、あなたのコードは次のようになります。

li.Item.Announcement { 
    background-color: #fff; 
}