如何结合多个CSS类选择器的jquery buttonset？

我正在使用JQuery按钮集，并且将图标悬停时或激活时设置为该图标的彩色版本，以便突出显示。该CSS看起来像：如何结合多个CSS类选择器的jquery buttonset？

.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）？

来源

2013-09-24 bmacnaughton

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

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

来源

2013-09-24 21:06:29

谢谢。两种方法都被认为是最佳做法吗？ – bmacnaughton

我认为“不要重复自己”原则的要点是使代码更清洁，但也使更改更简单，更简单。在这种情况下，如果您可能会更改background-image属性，并且您可能希望更改这两个选择器，那么这可能会更好。如果没有，我几乎会发现将它们分开以便于阅读。 –

谢谢 - 我发现它们分开时更容易阅读，但希望它们一起更换。我很欣赏你的观点。 – bmacnaughton

如何结合多个CSS类选择器的jquery buttonset？

回答

相关问题