如何結合多個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");
}