如何结合多个CSS类选择器的jQuery按钮集？

Question

我正在使用JQuery按钮集，并将图标悬停或处于活动状态时将其设置为图标的彩色版本，以使其突出。 CSS看起来像：

.ui-button .ui-icon.line {
    background-image: url("/static/16x16/line-black.gif");
}
.ui-button.ui-state-hover .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}
.ui-button.ui-state-active .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}

上面的css工作正常。 我的问题是是否有一种方法可以结合第二和第三css规则。

除其他变体外，我尝试了以下方法：

.ui-button .ui-icon.line {
    background-image: url("/static/16x16/line-black.gif");
}
.ui-button.ui-state-hover .ui-button.ui-state-active .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}

但是我还没有找到一种可行的组合。

有没有办法在一个CSS选择器中组合这两种组合（.ui-button.ui-state-hover和.ui-button.ui-state-active）？

Answer 1

您可以使用逗号分隔多个选择器：

.ui-button.ui-state-hover .ui-icon.line, .ui-button.ui-state-active .ui-icon.line {
    background-image: url("/static/16x16/line-color.gif");
}