html - CSS, Styling the Parent/Root but not the children? W/O creating sloppy CSS -

Then it's new, I'm trying to create clean CSS, here's my code example:

< Pre> and lt; Ul id = "main" & gt; & Lt; Li & gt; Blah blah & lt; / Li & gt; & Lt; Li & gt; Blah blah & lt; / Li & gt; & Lt; Li & gt; Blah blah & lt; / Li & gt; & Lt; Li & gt; & Lt; Ul & gt; & Lt; Li & gt; Ding Dang & lt; / Li & gt; & Lt; Li & gt; Ding Dang & lt; / Li & gt; & Lt; Li & gt; Ding Dang & lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Li & gt; & Lt; / Ul & gt;

Then I have the following CSS:

  #man li {background color: red; }  

The problem is that I do not want background red in Bright Dong Lite, is there a way to not say root / kids in CSS? Or do I need another ID / Class to cancel the parent's style?

Thanks

.

  #Men> Li {background color: red; }  

A & gt; B means that the direct root of b is a