css - jQuery検証テキストの色をオーバーライドするには?

Question

jQuery Validate プラグインを使用してエラーを強調表示します。テキストの色を赤に置き換えます。これは - を除くすべての要素で問題.help-blockありません。青のままにする必要があります。

エラーのないコードは次のとおりです。

<div class="control-group">
    <label class="control-label" for="place-of-birth">Place of birth</label>
    <div class="controls">
      <p class="help-block">Please input place of birth below, 2-80 symbols</p>
      <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off">
    </div>
</div>

そして、ここにエラーメッセージがあります：

<div class="control-group error"> <!-- STYLE IS CHANGED HERE -->
    <label class="control-label" for="place-of-birth">Place of birth</label>
    <div class="controls">
      <p class="help-block">Please input place of birth below, 2-80 symbols</p>
      <input type="text" class="input-xlarge" id="place-of-birth" name="place-of-birth" minlength="2" maxlength="80" autocomplete="off">
      <div class="help-block" generated="true" for="place-of-birth">Please enter at least 2 characters.</div> <!-- THIS LINE IS ADDED -->
    </div>
</div>

次のCSSでそれをオーバーライドしようとしました：

.control-group .error .help-block { color: blue; }

しかし、それは役に立ちませんでした。デモ。

ここで何が問題なのですか？