title: How to prioritize a CSS class?
body: <p>I'm referencing to some bootstrap style sheet and there's a definition for</p>
  
  <pre><code>.badge {
      display: inline-block;
      min-width: 10px;
      padding: 3px 7px;
      font-size: 12px;
      font-weight: 700;
      line-height: 1;
      color: #fff;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      background-color: #777;
      border-radius: 10px;
  }
  .alert-success {
      color: #3c763d;
      background-color: #dff0d8;
      border-color: #d6e9c6;
  }
  </code></pre>
  
  <p>I want to use this style but due to my HTML <code>class="alert-success badge"</code>, it's overridden by the other definition</p>
  
  <pre><code>.panel-default&gt;.panel-heading .badge {
      color: #f5f5f5;
      background-color: #333;
  }
  </code></pre>
  
  <p>Now that the latter definition is more specific, it prioritize over my desired CSS. How can I resolve this?</p>
  
  <p><strong>EDIT:</strong>
  There are a lot more other classes that have this issue. Is there a solution I don't need to specify them one by one?</p>