title: How do you determine what is overriding your style?
body: <p>When fiddling around with styles of sample code, I find the code has styles that will override my style because they will use a higher priority reference (e.g.: <code>.div .class</code> > <code>.class</code>).</p>
  
  <p>I will encounter situations like this:</p>
  
  <p><a href="https://i.stack.imgur.com/fREKk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/fREKk.png" alt="enter image description here"></a></p>
  
  <p><strong>How do I find out what style is overriding my style?</strong>  I want to avoid using <code>!important</code> because eventually I'll end up in the same situation.</p>
  
  <p>EDIT:  I'm not asking why this is happening. I already know about priority, hence why I mentioned that <code>.div .class</code> has a higher priority than <code>.class</code>. I want to trace what is actually being used instead of simply telling me it is "inactive". Also, I already know about Chrome Developer because the screen shot is from Chrome Developer.</p>
  
  <p>EDIT: actual problem fixed, but the question still remains... <strong>is there an easier way to see what causes the override?</strong></p>
  
  <p>Fix:  I just needed the selector in the proper order.  <code>.box</code> first, then <code>.box-blue</code>.</p>
  
  <p><a href="https://i.stack.imgur.com/uXKIU.png" rel="noreferrer"><img src="https://i.stack.imgur.com/uXKIU.png" alt="enter image description here"></a></p>