css - 如何将 3 个选择器与 :hover tag? 组合

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;
}