when there is no commas it will apply that style to the child in that exact order of coding. so for your example it will apply it to a list item in an unordered list within a div with id=content.
ie:
<div id=\"content\"> <p>here is a list:</p> <ul> <li>first</li> <li>second</li> </ul> </div>
so the style will only be applied to the <li> tag, but the <p> tag will not have this style applied
The commas serve to break the reading of the css so the same style can be applied to multiple tags with only one statement. So in your example a:link and a:hover and a:active will have the same style.
I think Adam had a pretty good explanation. In short, a comma separates two entirely different selectors. We just use them so we don't have to write the same attributes twice.
div#content ul li
but when they target links they seperate with commas
a:link, a:hover, a:active
why the commas?
ie:
so the style will only be applied to the <li> tag, but the <p> tag will not have this style applied
The commas serve to break the reading of the css so the same style can be applied to multiple tags with only one statement. So in your example a:link and a:hover and a:active will have the same style.
a { color: blue; }li { color: blue; }
Becomes:
a, li { color: blue; }