如何在 CSS 中定位这个 HTML？

Question

I'm trying to style Vanilla Forums and I just can't seem to figure out to select this class <li class="Item Announcement"></li> so that I can style it.

I don't know why it's being so difficult. Why would this not work?

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

Answer 1

Try:

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

That list item has two classes applied to it (Item and Announcement). So to target that with CSS, you need to prefix each class with a period and then remove the spaces. Leaving the spaces in the CSS selector would apply it to a descendant element that had the class.

Quick jsFiddle example .

Answer 2

The problem is that with spaces, its is no longer one selector but two, so you need to select using multiple class selector.

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

Answer 3

I think your problem is that your class name has a space in it. You probably meant for it to be a single class name - so change it to class="ItemAnnouncement" and .ItemAnnouncement {... and everything will work.

Answer 4

Keep in mind that <li class="Item Announcement"></li> is actually two classes. Classes cannot have spaces in their names. You can select this element with either li, .Item, .Announcement, or a combination of all three.

To make sure that you are selecting that exact element, your code should look something like this:

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

Answer 5

the space you have in your class name adds two distinct classes in your html element, .Item & .Announcement . You should consider naming your class itemAnnouncement, or if you're not a camel case fan, item-announcement.

If on the other hand you meant to have different classes you can style the one that suits you best, ie

.Item {background-color:#fff;}

Answer 6

spaces in class names and id are not allowed, so if you Put a space you are actually writing 2 class names for that item.