如何将 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;
}

有一天，:matches可能会可用：

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

如果你在此之前想要类似的东西，CSS预处理器是一个选项。

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

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