title: how to change CSS priority (don't use !important)
body: <p>If the css is as below:</p>
  
  <pre><code>input[type="text"]
  {
       border: 1px solid green; 
  }
  
  .text
  {
       border: 1px solid red ; 
  }
  </code></pre>
  
  <p>And if the html is as below:</p>
  
  <pre><code>&lt;div&gt;
   &lt;input type="text" class="text"/&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>The <code>border-color</code> of the textbox is green.
  It seems that the "element" has the higher priority.<br>
  How to make the .class valid? Is it a must to use the <code>!important</code>?</p>
  
  <p>Any other choices?</p>
  
  <hr>
  
  <p>I tested below CSS code:</p>
  
  <pre><code>input[type="text"]
  {
       border: 1px solid green; 
  }
  
  input[type="text"] .text
  {
       border: 1px solid red; 
  }
  </code></pre>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div&gt;
       &lt;input type="text" class="text"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Guess what?​</p>
  
  <p>Still Green.</p>
  
  <p>Remove the space in 'input[type="text"] .text'
  it becomes input[type="text"].text .
  That's ok. The border color is red.</p>