jquery - 如何为 jquery buttonset 组合多个 css 类选择器？

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