title: CSS Precedence Rules are not being applied properly on the Width of an input box
body: <p>I have a problem with the CSS precedence of an input box.  A width of <code>96%</code> is being applied while according to precedence rules an <code>auto</code> width should be applied.  If I apply <code>!important</code>, the style I want is applied.  However this is not how I would like to solve the problem.</p>
  
  <p>I have an <strong>input box</strong> implemented in this way</p>
  
  <pre><code>&lt;fieldset&gt;
      &lt;label&gt;Search&lt;/label&gt;
      &lt;input type="text" class="standard-size"&gt; &lt;!-- Referring to this --&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>And impacted by these 2 CSS declarations:</p>
  
  <pre><code>fieldset input[type=text] {
          width: 96%;
          -webkit-border-radius: 5px;
          -moz-border-radius: 5px;
          border-radius: 5px;
          border: 1px solid #BBBBBB;
          height: 20px;
          color: #666666;
          -webkit-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
          -moz-box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
          box-shadow: inset 0 2px 2px #ccc, 0 1px 0 #fff;
          padding-left: 10px;
          background-position: 10px 6px;
          margin: 0;
          display: block;
          float: left;
          margin: 0 10px;
  }
  
  .standard-size {
      width: auto ;
  }
  </code></pre>
  
  <p>According to this link:
  <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" rel="nofollow">http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/</a></p>
  
  <p>precedence works this way
  (Inline Style , ID, Class, Element).  A number on the left precedes any number on the right.</p>
  
  <p>In my case:
  fieldset input[type=text] translates to (0,0,0,2) because fieldset and input are 2 elements
  AND
  .standard-size translates to (0,0,1,0) because .standard-size is one CSS class</p>
  
  <p>(0,0,1,0) should take precedence over (0,0,0,2) because the 1 is simply more to the left than the 2 and that makes it more important.  So why is the width of 96% taking over?</p>
  
  <p>Thank you</p>