CSS：仅当有两个类时才悬停答案

【问题标题】：CSS :hover ONLY when there are two classesCSS：仅当有两个类时才悬停
【发布时间】：2013-01-23 10:35:58
【问题描述】：

我试图仅在将两个不同的类附加到 div 时应用 CSS :hover 选择器。我已经尝试过了，但这消除了悬停效果。

.accordionButton .cyan:hover{
    color: cyan;    
}

我也做不到：

.accordionButton:hover, .cyan:hover{
    color: cyan;    
}

因为我还有另外两种颜色，所以我也在尝试这样做。

基本上，有没有办法让 CSS 仅在将鼠标悬停在既是 .accordionButton 又是 .cyan 的 div 上时应用？

【问题讨论】：

标签： css hover

【解决方案1】：

您可以通过不带空格的链接来组合类选择器。
在下面的示例中，:hover 声明仅适用于具有 both 类的元素：

.accordionButton.cyan:hover {
  color: cyan;
}

<div class="accordionButton">Only Button</div>
<div class="cyan">Only Cyan</div>
<div class="accordionButton cyan">Both Classes</div>

您可以将多个类应用于元素，只能在选择器中的所有类时选择元素。

我们可以告诉浏览器我们只想匹配具有所有这些类的元素，方法是将它们链接在一起并且它们之间没有空格。

【讨论】：

【解决方案2】：

如果你在选择器中的类之间放置空格，就像你做的那样，这将选择所有类 cyan 的元素，它们是类 accordionButton 的元素的后代。如果要引用相同的元素，请删除空格。

【讨论】：