title: CSS Question: What has precendence?
body: <p>I am not new to CSS, I'm just not that adept with it.  I ran into an 'issue' today in having a sub-element being overwritten by the parent's css.   After some head scratching I realized all I needed to do was add an '! important' to the css (which to show you my ability is brand new to me)</p>
  
  <p>(I have placed a working example @ that illustrates my question in living color)
  <a href="http://jsfiddle.net/4RYM3/1/" rel="nofollow">http://jsfiddle.net/4RYM3/1/</a></p>
  
  <pre><code>#byIdName div{  /* #1 */
         margin: 30px;
      background:#FF00FF;
  }
  div#ByIdNameTwo{  /* #2 */
             margin: 30px;
       background:#00FF00;
  }
  div.idone{
      margin: 20px;
      background:#FFFF00;
  }
  div.idtwo{
      margin: 0px;
      background:#cccccc;
  }
  div.idone2{
      margin: 20px ! important;
      background:#FFFF00 ! important;
  }
  div.idtwo2{
      margin: 0px ! important;
      background:#cccccc ! important;
  }
  </code></pre>
  
  <p><a href="http://www.w3.org/TR/CSS2/cascade.html#specificity" rel="nofollow">http://www.w3.org/TR/CSS2/cascade.html#specificity</a></p>
  
  <p>Now looking at this, I cannot understand why #1 and #2 seem to behave differently (please look at the jsfiddle link above).<br>
  While I am happy that I got this to work (with the <strong>! Important</strong>) I am lost as to the <em>why</em> #1 and #2 are behaving in the manner that they are.  </p>
  
  <p>Can anyone shed some light on this behavior?  </p>
  
  <p>Is one the preferred method and the other looked down upon, and if so why (this is my main question)?</p>
  
  <p>thanks in advance</p>