CSS for sel1-8

  <script>
    a[id]  { background-color: green; color: black; }  # 0,0,1,1
     a:link  { background-color: white; color: blue; font-style: underline; }  # 0,0,1,1
     a:visited  { background-color: white; color: purple; font-style: underline; }  # 0,0,1,1
     a:hover  { background-color: #97fc00; color: blue; font-style: underline; }  # 0,0,1,1
     a:active  { background-color: red; color: blue; font-style: underline; }  # 0,0,1,1
  </script>

Page Content

<h3>Attribute Selector</h3>
<p>Here I've added an attribute selector which wins all the ties
against the pseudo links.  This breaks <i>all</i> the nice link coloring</p>
<ul>
 <li><a id="#5">Target #5</a><a href="#1">Link One</a></li>
 <li><a id="#1">Target #1</a><a href="#2">Link Two</a></li>
 <li><a id="#2">Target #2</a><a href="#3">Link Three</a></li>
 <li><a id="#3">Target #3</a><a href="#4">Link Four</a></li>
 <li><a id="#4">Target #4</a><a href="sel1-3.html">Link Five - back to first link page</a></li>
</ul>

Attribute Selector

Here I've added an attribute selector which wins all the ties against the pseudo links. This breaks all the nice link coloring