css - CSS：仅当有两个类时才悬停

Question

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

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

我也不能这样做：

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

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

基本上，有没有办法让 CSS 只在一个 .accordionButton 和一个 .cyan 的 div 上悬停时才应用？

score 13 · Accepted Answer

您可以通过在没有空格的情况下链接它们来组合类选择器。
在下面的示例中，:hover声明仅适用于具有两个类的元素：

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

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

您可以将多个类应用于元素，并且...仅在选择器中的所有类中选择元素。

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

score 1 · Accepted Answer

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

2 回答 2