Как настроить этот HTML-код в CSS?

Question

Я пытаюсь создать форум Vanilla, и я просто не могу понять, как выбрать этот класс <li class="Item Announcement"></li>, чтобы я мог его стилизовать.

Я не знаю, почему это так сложно. Почему это не сработает?

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

Answer 1

Try:

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

Этот элемент списка имеет два класса, примененные к нему (пункт и сообщения). Поэтому, чтобы настроить таргетинг с помощью CSS, вам нужно префикс каждого класса с периодом, а затем удалить пробелы. Оставляя пробелы в селекторе CSS, он применил бы его к элементу потомка, у которого был класс.

jsFiddle example.

Answer 2

Проблема в том, что с пробелами она больше не является одним селектором, а двумя, поэтому вам нужно выбрать несколько селекторов классов.

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

Answer 3

Я думаю, ваша проблема в том, что ваше имя класса имеет пробел в нем. Вы, вероятно, предназначались для того, чтобы это было одно имя класса, поэтому измените его на class="ItemAnnouncement" и .ItemAnnouncement { ..., и все будет работать.

Answer 4

пространство, которое у вас есть в вашем имени класса, добавляет два разных класса в ваш элемент html, .Item & .Announcement. Вы должны подумать об именовании своего элемента itemAnnouncement, или если вы не поклонник верблюда, item-announce.

Если с другой стороны, вы имели в вид, чтобы иметь различные классы, которые вы можете стиль, который подходит вам лучше всего, то есть

.Item {background-color:#fff;} 

Answer 5

пространство в именах классов и идентификаторах не разрешено, так что если вы поставите пространство вам на самом деле пишут 2 названия классов для этого элемента.

Answer 6

Имейте в виду, что <li class="Item Announcement"></li> на самом деле два класса. Классы не могут содержать пробелы в своих именах. Вы можете выбрать этот элемент либо с помощью li, .Item, .Announcement, либо из комбинации всех трех.

Для того, чтобы убедиться, что вы выбираете, что точный элемент, код должен выглядеть примерно так:

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