CSS 在一个规则中定位具有多个类的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5196583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Target elements with multiple classes, within one rule
提问by Tanner Ottinger
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:
我有一些 HTML 包含多个类的元素，我需要在一个规则中分配它们，以便相同的类在不同的容器中可能不同。假设我的 CSS 中有这个：
.border-blue {
border: 1px solid blue;
}
.background {
background: url(bg.gif);
}
Then I have this in my HTML:
然后我在我的 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);
}
回答by Vian Esterhuizen
.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'.
.border-blue.background { ... }用于具有多个类的一项。.border-blue, .background { ... }用于多个项目，每个项目都有自己的类。.border-blue .background { ... }用于其中“.background”是“.border-blue”的子项的一项。
See Chris' answerfor a more thorough explanation.
有关更详尽的解释，请参阅Chris 的回答。
回答by Chris Graham
Just in case someone stumbles upon this like I did and doesn't realise, the two variations above are for different use cases.
以防万一有人像我一样偶然发现并且没有意识到，上面的两个变体适用于不同的用例。
The following:
下列：
.blue-border, .background {
border: 1px solid #00f;
background: #fff;
}
is for when you want to add styles to elements that have either the blue-border or background class, for example:
用于当您想要向具有 blue-border 或 background 类的元素添加样式时，例如：
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
would all get a blue border and white background applied to them.
都会得到应用到它们的蓝色边框和白色背景。
However, the accepted answer is different.
然而，公认的答案是不同的。
.blue-border.background {
border: 1px solid #00f;
background: #fff;
}
This applies the styles to elements that have both classes so in this example only the <div>with both classes should get the styles applied (in browsers that interpret the CSS properly):
这将样式应用于具有两个类的元素，因此在此示例中，只有<div>具有两个类的元素才能应用样式（在正确解释 CSS 的浏览器中）：
<div class="blue-border">Hello</div>
<div class="background">World</div>
<div class="blue-border background">!</div>
So basically think of it like this, comma separating applies to elements with one class OR another classand dot separating applies to elements with one class AND another class.
所以基本上可以这样想，逗号分隔适用于具有一个类或另一个类的元素，点分隔适用于具有一个类和另一个类的元素。
