Как по-разному стилизовать различные элементы jquery ui?

Question

Чтобы стилизовать вкладки jqueryui определенным образом, члены моей команды изменили класс ui-state-default следующим образом

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default 
{ border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg); 

  font-weight: bold; color: White;  }

Проблема в том, что я использую комбинированный список автозаполнения jqueryui, который создает элемент кнопки с тем же классом

Таким образом, у меня появляется фоновое изображение, которое делает его уродливым и огромным.

Как мне установить разные стили для разных элементов? Я пробовал вставлять button.ui-state-default как другой стиль, jqueryui отменяет это.

Answer 1

Измените текущие правила CSS для вкладок следующим образом:

.ui-tabs .ui-tabs-nav .ui-state-default, 
.ui-tabs.ui-widget-content .ui-state-default, 
.ui-tabs .ui-widget-header .ui-state-default { border: 3px solid transparent; 
  background: #F5AD4C 0px 0px repeat-x url(pix/redesign/orangebuttonstrip.jpg);
  font-weight: bold; color: White;
}

Примечание : .ui-tabs.ui-widget-content не является ошибкой, это сделано специально.Это означает, что если оба эти класса присутствуют, то стиль по следующему правилу.