title: How does CSS handle specificity tie?
body: <p>Consider a <code>&lt;div class="well well-large well-small" /&gt;</code> with the following styles from twitter bootstrap <a href="https://github.com/twitter/bootstrap/blob/master/less/wells.less" rel="nofollow">https://github.com/twitter/bootstrap/blob/master/less/wells.less</a></p>
  
  <pre><code> // Base class
  .well {
    min-height: 20px;
    padding: 19px;
    margin-bottom: 20px;
    background-color: @wellBackground;
    border: 1px solid darken(@wellBackground, 7%);
    .border-radius(@baseBorderRadius);
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.05));
    blockquote {
      border-color: #ddd;
      border-color: rgba(0,0,0,.15);
    }
  }
  
  // Sizes
  .well-large {
    padding: 24px;
    .border-radius(@borderRadiusLarge);
  }
  .well-small {
    padding: 9px;
    .border-radius(@borderRadiusSmall);
  }
  </code></pre>
  
  <p>How does CSS decide which padding to apply in situations such as this? Will it be 19px, 24px, 9px or undefined value? My understanding of specificity is rudimentary and it seems that there is a specificity tie in this case between the <code>.well .well-large and .well-small</code></p>