У меня есть два стиля, каждый из которых объявлен в отдельном контроле третьей стороны, которые не очень хорошо играют вместе, и я даже не уверен, почему это - и в конечном итоге - как заставить их работать так, как я хочу.

HTML:

<table>
  <tr class="myrow">
    <td>normal cell</td>
    <td class="ui-state-error">error cell</td>
  </tr>
</table>

CSS:

.myrow>td {  /* declared in the grid component */
  background-color: #88f;
}
.ui-state-error {  /* declared in jQuery UI */
  background-color: #f00;
}

HTML и CSS упрощены, чтобы показать точную ошибку.Вот скрипка.

Конечным результатом здесь являются обе ячейки, отображающие синий фон (FF 46.0).

Тем не менее, я ожидал бы.ui-state-error чтобы быть более конкретным, так как он применяется непосредственно к рассматриваемой ячейке по сравнению с.myrow>td правило, которое кажется более общим на первый взгляд.

Несмотря на это, браузер решает применить.myrow>td CSS и я хочу, чтобы он применял.ui-state-error.

Как я могу это сделать, учитывая тот факт, что сами стили CSS не находятся под моим контролем?