如何在CSS中定位此HTML？

Question

我正试图设计香草论坛，我似乎无法选择这个班级<li class="Item Announcement"></li>，以便我可以设计它。

我不知道为什么这么困难。为什么这不起作用？

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

Answer 1

尝试：

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

该列表项有两个类（Item和Announcement）。因此，要使用CSS定位，您需要为每个类添加一个句点，然后删除空格。保留CSS选择器中的空格会将其应用于具有该类的后代元素。

快速 jsFiddle example 。

Answer 2

问题是，对于空格，它不再是一个选择器而是两个，所以你需要选择使用多个类选择器。

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

Answer 3

我认为您的问题是您的班级名称中有空格。您可能认为它是一个单一的类名 - 所以将其更改为class="ItemAnnouncement"和.ItemAnnouncement { ...，一切都会有效。

Answer 4

请记住，<li class="Item Announcement"></li>实际上是两个类。类的名称中不能包含空格。您可以使用li，.Item，.Announcement或这三者的组合来选择此元素。

为确保您选择的是精确元素，您的代码应如下所示：

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

Answer 5

您的类名称中的空格会在您的html元素中添加两个不同的类.Item＆amp; .Announcement。您应该考虑命名您的班级项目公告，或者如果您不是骆驼案例粉丝，则为项目公告。

另一方面，如果您打算使用不同的课程，您可以选择最适合您的课程，即

。

.Item {background-color:#fff;}

Answer 6

不允许在类名和id中使用空格，因此如果你放置一个空格，你实际上是为该项写了2个类名。