如何将3个选择器与a：hover标签组合？

Question

我有以下CSS规则：

#toolbar1 a:hover { 
    color: #415682;
}

#toolbar2 a:hover { 
    color: #415682;
}

#toolbar3 a:hover { 
    color: #415682;
}

如何将这些组合成一个规则？我试过了

#toolbar1 #toolbar2 #toolbar3 a:hover { 
    color: #415682;
}

但它不起作用。我试过在这些之间放置逗号，也无济于事。

Answer 1

为了获得广泛的浏览器兼容性，您只需重复一遍：

#toolbar1 a:hover,
#toolbar2 a:hover,
#toolbar3 a:hover {
    color: #415682;
}

Some day，:matches可能有用：

:matches(#toolbar1, #toolbar2, #toolbar3) a:hover {
    color: #415682;
}

如果你想在此之前做类似的事情，可以选择CSS预处理器。

在这种特殊情况下，结构表明一个类可能是合适的：

.toolbar a:hover {
    color: #415682;
}