为什么CSS：活动链接不会使当前页面链接高亮显示？

Question

下面我有下面的代码清单到母版页

<div id="header"> 
      <ul> 
       <li><a href="default.aspx">Home</a></li> 
       <li><a href="page1.aspx">Page1</a></li> 

      </ul> 
     </div>  ​ 

与CSS

#header a:hover { 
    color: #AA1111; 
    border-color: #AA1111; 
} 

#header a:active { 
    color: #AA1111; 
    border-color:#AA1111; 
} 

但是当页面已在工作环节不与颜色来突出显示。

Answer 1

:active并不表明在当前页面激活链接将被高亮显示。

:active是鼠标点击鼠标在链接上发布之间的链路的状态。尝试将鼠标放在链接上以便自己查看。

要设置不同的风格，你要么需要给当前页面的链接不同的类，并针对该类在你的CSS当前页面的链接。

如果您使用.NET，我建议使用具有指定当前页面菜单链接类的选项不同的CSS菜单适配器/列表控件。

Answer 2

我想你是混淆了伪选择器:active的含义。该CSS规则将适用于你点击链接。但是，如果该链接将您带到新页面，则锚点不再处于活动状态。

你需要做的是向锚点中添加一个类，具体取决于你在哪个页面上。所以，在default.aspx中，你需要确保你有<a class="active" href="default.aspx">Home</a>。然后，您需要将您的css规则更改为#header a.active。

Answer 3

你可能想设置你的页面的方式：

#header li {} 
#header li.active a {color: #AA1111; border-color:#AA1111;} 


<div id="header"> 
     <ul> 
      <li class="active"><a href="default.aspx">Home</a></li> 
      <li><a href="page1.aspx">Page1</a></li> 

     </ul> 
</div> 

您需要在此基础上页面设置上li活动类。

演示：http://jsfiddle.net/lucuma/HT4U4/