title: Are grouped CSS rules treated differently than specifying separate rules for each selector?
body: <p>The following is two nearly identical XHTML documents with slightly different CSS.  In my understanding, grouping selectors is only for convenience, and shouldn't have an effect on their application, however these two documents produce different renderings?  Am I confused?</p>
  
  <p>First with selectors grouped</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;title&gt;An XHTML 1.0 Strict standard template&lt;/title&gt;
  &lt;meta http-equiv="content-type"
      content="text/html;charset=utf-8" /&gt;
  
  &lt;style type="text/css"&gt;
      #container {
          background-color : #000000;
          color : #000000;
      }
      a, a:link, a:visited, a:hover, a:active {
          color : #000000;
      }
      .link {
          color : #FFFFFF;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="container"&gt;
  &lt;a href="#" class="link"&gt;Testing&lt;/a&gt;&lt;br /&gt;&lt;a href="#" class="link"&gt;Testing&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>-----=====Versus=====-----<br>
  Separate selectors</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  
  &lt;head&gt;
  &lt;title&gt;An XHTML 1.0 Strict standard template&lt;/title&gt;
  &lt;meta http-equiv="content-type"
      content="text/html;charset=utf-8" /&gt;
  
  &lt;style type="text/css"&gt;
      #container {
          background-color : #000000;
          color : #000000;
      }
      a {
          color : #000000;
      }
      a:visited {
          color : #000000;
      }
      a:hover {
          color : #000000;
      }
      a:active {
          color : #000000;
      }
      .link {
          color : #FFFFFF;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div id="container"&gt;
  &lt;a href="#" class="link"&gt;Testing&lt;/a&gt;&lt;br /&gt;&lt;a href="#" class="link"&gt;Testing&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>