Ich habe zwei Stile, von denen jeder in einem separaten Steuerelement eines Drittanbieters deklariert ist, das nicht gut zusammenspielt, und ich bin mir nicht einmal sicher, warum und letztendlich wie sie so funktionieren, wie ich es will.

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;
}

Beide HTML & CSS vereinfacht, um den genauen Fehler anzuzeigen. Hier ist die Geige.

Das Endergebnis hier sind beide Zellen mit blauem Hintergrund (FF 46.0).

Allerdings würde ich das @ erwart.ui-state-error um genauer zu sein, da es direkt auf die betreffende Zelle angewendet wird im Vergleich zum.myrow>td Regel, die auf den ersten Blick allgemeiner erscheint.

Regardless, der Browser beschließt, @ anzuwend.myrow>td CSS und ich möchte, dass es das @ anwend.ui-state-error.

Wie kann ich das tun, wenn ich bedenke, dass die CSS-Stile selbst nicht unter meiner Kontrolle stehen?