jquery - CSS の特異性と選択的優先度と思われるもの

Question

JQuery UI を使用して、ポップアップし、フォームに情報を入力するように求めるモーダル ウィンドウを作成しています。ユーザーが必要な情報を入力しない場合、テキスト フィールドは赤い境界線で強調表示されます。

ただし、フィールドの境界線を手動で変更したため、テキストエリアの境界線が赤に変わるだけです。入力フィールドとテキストフィールドの CSS ルールは同じですが、結果には違いがあります。

入力フィールドのエラー:

テキストエリアのエラー:

CSS:

#emailField input, textarea
{
    padding: .7em;
    border-radius: 5px;
    border: 1px solid #999;
}

.ui-state-error, .ui-widget-content .ui-state-error, .ui-widget-header .ui-state-error{
    border: 1px solid #fb483d;
    background: #fef1ec url(/Content/themes/css/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
    color: #cd0a0a;
}

開発者コンソールから CSS を見ると、どちらが優先されているかがわかります。しかし、なぜ違いがあるのでしょうか？

入力フィールドの CSS:

テキストエリアの CSS:

簡単に言えば、入力フィールドとテキストエリアの両方を赤い境界線で囲みたいと思いますが、選択的な優先順位があるように見える理由も理解したいと思います。