在一条规则内定位具有多个类的元素 [英] Target elements with multiple classes, within one rule

问题描述

我有一些HTML，其中的元素具有多个类，我需要在一个规则中分配它们，以便同一类在不同的容器中可能不同.假设我的CSS中有这个

I have some HTML that would have elements with multiple classes, and I need to assign them within one rule, so that the same classes could be different within different containers. Say I have this in my CSS:

.border-blue {
    border: 1px solid blue;
}
.background {
    background: url(bg.gif);
}

然后我的HTML中有这个

Then I have this in my HTML:

<div class='border-blue background'>Lorum Crap No-one Cares About Ipsum</div>

我可以在单个规则中定位这些目标吗?像这样，例如，我知道这是行不通的:

Can I target these within a single rule? Like this, for example, which I know doesn't work:

.border-blue, .background {
    border: 1px solid blue;
    background: url(bg.gif);
}

推荐答案

.border-blue.background { ... }用于具有多个类的一项.
.border-blue, .background { ... }用于具有各自类的多个项目.
.border-blue .background { ... }用于一项，其中".background"是".border-blue"的子项.

.border-blue.background { ... } is for one item with multiple classes.
.border-blue, .background { ... } is for multiple items each with their own class.
.border-blue .background { ... } is for one item where '.background' is the child of '.border-blue'.

有关更详尽的解释，请参见克里斯的答案.

See Chris' answer for a more thorough explanation.

这篇关于在一条规则内定位具有多个类的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！