我如何做一个“和”选择器？ [复制]答案

【问题标题】：How do I do an "and" selector? [duplicate]我如何做一个“和”选择器？ [复制]
【发布时间】：2014-09-22 04:59:11
【问题描述】：

我想选择同时具有一个类和另一个类的所有元素。例如，在下面的标记中，我只想选择包含类“foo”和类“bar”的元素，而不是那些只有其中一个类的元素：

<p class="foo">Larry</p>
<p class="bar">Moe</p>
<p class="foo bar">Curly</p>

有没有办法在 CSS 中只将样式应用于上例中包含“Curly”的段落？

【问题讨论】：

@Huangism：这个标题很好，我真的不明白你为什么一直删除一个无害的关键字，尤其是在版主已经回滚了两次之后。如果标题类似于“[CSS] 我如何...”，那很好，但这里不是这样。
@BoltClock 我在关注这个meta.stackexchange.com/questions/19190/… 标题在没有标签的情况下仍然很有意义
@Huangism“在 CSS 中”不是标题中的“标签”。
@MattBall 请看看我上面评论中的链接
@Huangism：我对那个答案发表了评论。

【解决方案1】：

p.foo.bar {
    background-color: chucknorris;
}

只需将选择器一个接一个地附加，中间没有空格。

【讨论】：

【解决方案2】：

连接选择器。所以你会使用.foo.bar {}

【讨论】：

谢谢！不幸的是，在以下位置没有这样的例子：w3schools.com/cssref/css_selectors.asp
@David Whiteman：您可以在official W3C spec 中找到这种用法的示例。 W3Schools 并不总是最好的资源，而且它也不隶属于 W3C。

【解决方案3】：

p.foo.bar { //styles }

您可以通过将选择器放在一起来连接它们。

当然，您应该尽量避免过于具体，因为这可能会导致日后出现问题。

【讨论】：