Div id selector not limiting css

HTML & CSS
1

I am definitely new to all this, but I study hard and learn quickly. Thanks to all for any help you can offer. I’m always impressed by the community that surrounds this kind of work. I have noticed this problem in two different instances when I am adding pages and css to an existing site. I have created divs with an id selector, and styled the <a> tags within them. For an example, I have added a page with the following code:

<div id=“section_links”><h2>Click each section title to view pictures</h2>
<ul>
<li><a href=“#” onclick=“showSection(1)” >title1</a></li>
<li><a href=“#” onclick=“showSection(2)” >tile2</a></li>
<li><a href=“#” onclick=“showSection(3)” >title3</a></li>
<li><a href=“#” onclick=“showSection(4)” >title4</a></li>
</ul>
</div>

I wrote the css as follows:

#section_links ul li a, a:visited {
font-size: 14px;
color: #003366;
font-weight:bold;
f0text-decoration: none;
}

My problem is now I see the effects of this css in other places, such as the main nav menu that is under the id of #navbar. When I use Firebug to inspect the element, I get the following, even on a page were my code <div id=“section_links”> doesn’t occur:

Shouldn’t the #section_links selector limit the range of the css rules? Thanks again for any help.

2

You are applying the rules to two different combinations separated by the comma

#section_links ul li a

and

a:visited

3

Would the proper reference be
#section_links ul li a, #section_links ul li a:visited {} ?

4

So I tried the selectors as in my previous post, and my problem is solved.

Thanks be to all those who know what they are doing. I hope to get there some day.