html - 如何在 CSS 中定位这个 HTML？

Question

我正在尝试设置香草论坛的样式，但我似乎无法弄清楚选择这个类<li class="Item Announcement"></li>以便我可以设置它的样式。

我不知道为什么这么难。为什么这行不通？

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

score 6 · Accepted Answer

尝试：

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

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

score 1 · Accepted Answer

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

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

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

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

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

score 0 · Accepted Answer

您在类名中的空格在 html 元素中添加了两个不同的类.Item& .Announcement。您应该考虑将您的课程命名为 itemAnnouncement，或者如果您不是骆驼案的粉丝，请命名为 item-announcement。

另一方面，如果您打算拥有不同的课程，您可以设计最适合您的课程，即

.Item {background-color:#fff;}

score 0 · Accepted Answer

类名和 id 中的空格是不允许的，所以如果你放一个空格，你实际上是在为那个项目写 2 个类名。

6 回答 6