如何为jquery按钮集组合多个css类选择器？

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

但我还没有找到一个有效的组合

---

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

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

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

---

非常感谢。这两种方法都被认为是最佳实践吗？我认为“不要重复你自己”原则的要点是使代码更干净，但也使更改更容易和不那么棘手。在这种情况下，如果您可能要更改背景图像属性，并且希望两个选择器都更改该属性，那么这可能会更好。如果不是的话，我几乎会发现分开它们更容易阅读。谢谢-我发现分开时更容易阅读，但希望它们一起改变。我欣赏你的观点。