Как объединить несколько селекторов класса CSS для JQuery Buttonset?

0

Я использую набор кнопок 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 отлично работает. Мой вопрос заключается в том, есть ли способ объединить 2-е и 3-е правила 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?

Теги:

1 ответ

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");
}
Поделиться
  • 0
    Спасибо. Является ли любой из подходов лучшей практикой?
  • 0
    Я думаю, что основной принцип принципа «не повторяйся» состоит в том, чтобы сделать код чище, а также сделать изменения проще и менее сложными. В этом случае, если вы, вероятно, измените свойство background-image, и вы захотите, чтобы это изменилось для обоих селекторов, то это, вероятно, лучше. Если нет, я бы почти нашел разделение их, чтобы их было легче читать.
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню