title: does the order of styles matter?
body: <p>below is my markup. when i move the mouse over the hyperlinks they get underlined and turn red. but if i swap the order of the last two rules, the hyperlinks still get underlined, but their color changes to black rather than red. is this by design? if so, how are the rules applied?</p>
  
  <p>thanks!
  konstantin</p>
  
  <pre><code>
  &lt;?xml version="1.0" encoding="UTF-8" ?>
  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
  &lt;html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  &lt;head>
      &lt;title>
      &lt;style type="text/css" media="all">
          .menu a
          {
              text-decoration: none;
          }
          .menu li:hover a
          {
              color: black;
          }
          .menu li a:hover
          {
              color: red;
              text-decoration: underline;
          }
      &lt;/style>
  &lt;/head>
  &lt;body>
      &lt;div class="menu">
          &lt;ul>
              &lt;li>&lt;a href="#">item0&lt;/a>&lt;/li>
              &lt;li>&lt;a href="#">item1&lt;/a>&lt;/li>
          &lt;/ul>
      &lt;/div>
  &lt;/body>
  &lt;/html>
  </code></pre>