CSS specificity vs !important

<!DOCTYPE html>
<html>

  <head>
    <style>
      a {color: black!important} 
      p a {color: red!important}
      
      p span {color: red!important}
      span {color: black!important} 
    </style>
  </head>

  <body>
    <p>No matter which rule goes first, if both have !important in them, the more specific wins.</p>
    <p><a>more specific last</a></p>
    <p><span>more specific first</span></p>
  </body>

</html>

// Code goes here

/* Styles go here */