title: Overriding :visited overrides :link :hover :active
body: <p>please consider these styles:</p>
  
  <pre><code>a:link { color: blue }
  a:visited { color: red }
  a:hover { color: green }
  a:active { color: black }
  #special:link { color: pink }
  </code></pre>
  
  <p>And now this markup:</p>
  
  <pre><code>&lt;a href="#"&gt;Normal link&lt;/a&gt;
  &lt;a href="#" id="special"&gt;Special link&lt;/a&gt;
  </code></pre>
  
  <p>I expect the "special" link to be pink while keeping the other colors. However, pink replaces the other colors.</p>
  
  <p>Why is this happening? How could I fix it? Thank you.</p>