Vanilla Forums のスタイルを設定しようとしています<li class="Item Announcement"></li>
が、スタイルを設定できるようにこのクラスを選択する方法がわかりません。
なぜそんなに難しいのかわかりません。なぜこれがうまくいかないのでしょうか?
.Item Announcement {
background-color: #FFF;
{
試す:
li.Item.Announcement {
background-color: #FFF;
}
そのリスト アイテムには 2 つのクラス (Item と Announcement) が適用されています。そのため、CSS でそれをターゲットにするには、各クラスの前にピリオドを付けてから、スペースを削除する必要があります。CSS セレクターにスペースを残すと、クラスを持つ子孫要素に適用されます。
<li class="Item Announcement"></li>
実際には 2 つのクラスであることに注意してください。クラスの名前にスペースを含めることはできません。この要素は、li、.Item、.Announcement、または 3 つすべての組み合わせで選択できます。
その正確な要素を選択していることを確認するには、コードは次のようになります。
li.Item.Announcement {
background-color: #fff;
}
問題は、スペースを使用すると、セレクターが 1 つではなく 2 つになるため、複数のクラス セレクターを使用して選択する必要があることです。
.Item.Announcement {
background-color: #FFF;
}
あなたの問題は、クラス名にスペースが含まれていることだと思います。おそらく単一のクラス名にするつもりだったので、 and に変更するclass="ItemAnnouncement"
と.ItemAnnouncement { ...
すべてが機能します。
クラス名と ID にスペースを使用することは許可されていないため、スペースを入れると、実際にはその項目に対して 2 つのクラス名を記述していることになります。
.Item
クラス名に含まれるスペースにより、html 要素&に 2 つの異なるクラスが追加されます.Announcement
。クラスに itemAnnouncement という名前を付けるか、キャメル ケースのファンでない場合は item-announcement に名前を付けることを検討する必要があります。
一方、異なるクラスを使用する場合は、自分に最も適したクラスをスタイルできます。つまり、
.Item {background-color:#fff;}