css - Chrome CSS の失敗

Question

selectこんにちは、要素の css を変更しようとしています。Firefox では正常に動作しますが、Google Chrome では動作しません。Chrome Developerツールを使用しようとするとStyles/Matched CSS Rules、要素の下で高さが正常に変更されていることがわかります30pxが、に行くとComputed Style表示heightされ18pxますが、矢印をクリックして詳細情報を取得すると、高さが30px

#new-job select - 30px 

私は html/css および chromes 開発者ツールを初めて使用しますが、うまくいくはずです。これが私のコードです

<div id="new-job">  
  <form accept-charset="UTF-8" action="/jobs" class="new_job" id="new_job" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="vfKmC+vnnIl/6icDIbDRfZghNR927qmEqTdB9I2OeMQ="></div>

    <div class="field">
      <label for="job_category">Category</label>
      <select id="job_category" name="job[category]"><option value=""></option>
                <option value="Bistro Card">Bistro Card</option>
                <option value="Dongle">Dongle</option>
                <option value="Return">Return</option>
                <option value="Catering">Catering</option>
                <option value="Other">Other</option></select><br><br>
    </div>
    <div class="field">
      <label for="job_location">Location</label><br>
      <input id="job_location" name="job[location]" size="30" type="text">
    </div>
    <div class="field">
      <label for="job_description">Description</label><br>
      <textarea cols="40" id="job_description" name="job[description]" rows="20"></textarea>
    </div>
    <div class="actions">
      <input class="button small radius" id="submit-job" name="commit" type="submit" value="create job">
      <a href="/jobs" class="button small radius secondary">go back</a>
      <div id="new-job-errors"> </div>
    </div>
    </form>
</div>

そして、ここに私のCSSがあります

#new-job {
    select {height: 30px;}
}

Answer 1

正しい構文は

#new-job select {
    height: 30px;
}