Html CSS样式是否适用于所有情况?

Html CSS样式是否适用于所有情况?,html,css,Html,Css,这是HTML: #menu {float:left; margin:0; padding:0; list-style-type:none; width:100%; border:1px solid #BBBBBB; background-color:#FFFFFF;} #menu li {display:list-item; float:left;} #menu a:link,a:visited {border-right:1px solid #BBBBBB; display:block; fl

这是HTML:

#menu {float:left; margin:0; padding:0; list-style-type:none; width:100%; border:1px solid #BBBBBB; background-color:#FFFFFF;}
#menu li {display:list-item; float:left;}
#menu a:link,a:visited {border-right:1px solid #BBBBBB; display:block; float:left;  padding:10px 15px; color:#AAAAAA; text-decoration:none; font-weight:bold; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;}
#menu a:hover,a:active {background-color:#0096FF; color:#FFFFFF; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;}


问题是,我在UL之前有另一个链接,它也获得了这些属性。我如何使只有UL内部的链接获得这些属性,而不是之前的链接(UL外部)。

更改此设置

<div id='header'>
<a href='index.html'><img src='logo.png' /></a>
</div>
<ul id='menu'>
<li><a href='index2.html'>HOME</a></li>
<li><a href='index.html'>FORUM</a></li>
</ul>
你忘了把菜单放在a:已访问和a:活动之前

#menu a:link,#menu a:visited {border-right:1px solid #BBBBBB; display:block; float:left;   padding:10px 15px; color:#AAAAAA; text-decoration:none; font-weight:bold; -webkit-transition:  background 0.2s linear; -moz-transition: background 0.2s linear;}
#menu a:hover,#menu a:active {background-color:#0096FF; color:#FFFFFF; -webkit-transition: background 0.2s linear; -moz-transition: background 0.2s linear;}