Конфликт темы jQuery UI: вкладки SlickGrid и jQuery UI

Проблема

Когда jQueryUI создает вкладки из HTML, он добавляет классы jQueryUI CSS. Из примеров jQueryUI:

<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1"></div>
    <div id="tabs-2"></div>
    <div id="tabs-3"></div>
</div>

становится

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
    <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
        <li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Nunc tincidunt</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-2">Proin dolor</a></li>
        <li class="ui-state-default ui-corner-top"><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom"></div>
    <div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
    <div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide"></div>
</div>

Проблема возникает из-за того, что содержимое SlickGrid теперь выходит как дочерний элемент элемента с классом ui-widget-content. На самом деле, есть 2 предка заголовка сетки, которые имеют этот класс — в приведенном выше коде см. <div id="tabs"> и <div id="tabs-1"> оба используют этот класс при создании вкладок.

Правила jQueryUI CSS, которые должны применяться для получения правильного значка поиска:

.ui-icon {
    width: 16px;
    height: 16px;
    background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-icon-search {
    background-position: -160px -112px;
}

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #d3d3d3;
    background: #e6e6e6 url(images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    font-weight: normal;
    color: #555555;
}

Разметка для значка:

<span style="float:right" class="ui-icon ui-icon-search ui-state-default ui-corner-all" title="Toggle search panel" onclick="toggleFilterRow()"></span>

поэтому применяются правила CSS .ui-icon, .ui-icon-search и первое совпадение третьего правила .ui-state-default.

Однако, когда такая же разметка существует как потомок элемента с классом .ui-widget-content, 2-я часть 3-го правила выше (.ui-widget-content .ui-state-default) также соответствует, что является более конкретным. См. http://www.stuffandnonsense.co.uk/archives/images/specificitywars-05v2.jpg для объяснения специфики CSS на тему «Звездных войн». По сути, свойство background третьего правила, которое включает background-position:50% 50%, является более конкретным, чем правило .ui-icon-search с одним селектором, поэтому переопределяет правильное background-position:-160px -112px.

Решение

Необходимо сделать правило .ui-icon-search таким же или более конкретным, чем правило .ui-widget-content .ui-state-default, что можно сделать одним из следующих способов:

1. Добавление !important к правилу
2. Добавление дополнительных селекторов в правило

Например

.ui-icon-search {
    background-position: -160px -112px !important;
}

or

.ui-icon-search, .ui-widget-content .ui-icon-search {
    background-position: -160px -112px;
}

Я не могу придумать способ, который не включает изменение CSS jQueryUI (или дублирование правила .ui-icon-search в вашем собственном CSS с помощью одного из двух приведенных выше решений). Мне на самом деле было бы интересно посмотреть, есть ли другой способ!