ul, li from separate div pulling css from unrelated div?

Here's how my structure is:

<div id="filter">
    ...some ul, li...
</div>

<div id="开发者_JAVA百科content>
    <div class="userpost">
        ...some ul, li...
    </div>
</div>

And the CSS

#filter ul, li {
    list-style-type: none;
}

#content .userpost > ul,li {
    list-style-type: disc;
}

For some reason, my ul, li from my #filter div is getting the CSS from #content .userpost, so my filters have bullet points on them which I do not want. I don't understand how the ul, li from #filter could possibly be affected by the css that's applied to #content .userpost. If someone could explain this to me I'd greatly appreciate it.

Needs to be

#filter ul, #filter li {
    list-style-type: none;
}

#content .userpost > ul, #content .userpost > ul li {
    list-style-type: disc;
}

Consider this - its all to do with the comma:

#filter ul, #filter li { list-style-type: none; }

#content .userpost > ul, #content .userpost > li { list-style-type: disc; }

It's because you've put a comma before your li tag in your css.

saying #.content ... ul, li means that it should apply to everything before the comma, and everything after the comma. So it's applying it to all your list item tags. Just remove the comma.

What you want is #content .userpost > ul li without the comma.

Your CSS is slightly incorrect. Due to how CSS works, simply adding a comma targets ANY plain li elements. Try:

#content .userpost > ul li { list-style-type: disc; }

or

#content .userpost > ul, #content .userpost > li { list-style-type: disc; }