Question

我有这个li列表，但我想知道如何让当前页面链接具有白色背景（li:active）

CSS：

#layout-three-liquid2 #section-navigation ul
{
    margin: 0;
    padding: 0;
}

#layout-three-liquid2 #section-navigation ul li
{
    margin: 0 0 0em;
    padding: 0;
    list-style-type: none;
}
#layout-three-liquid2 #section-navigation ul li:hover{

    background-color:white;



}
#layout-three-liquid2 #section-navigation ul li a:active{

    background-color:white;



}

HTML：

<ul>
   <li><a active="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

但它不起作用，我该如何解决？

Answer 1

您的代码li:active无效/正确。您需要在CSS中指定类和链接，如下所示：

#section-navigation ul li a.current {
  background-color:white;
}

Answer 2

您不能<a active="current">

因为active不是<a>元素的有效属性。

请尝试使用class=current。

然后在你的CSS中你可以用

来定位元素

#layout-three-liquid2 #section-navigation ul li a.current {
    ...
}

Answer 3

你在滥用CSS伪类。 :active和:hover是特殊值，在单击链接（具有焦点）时以及用户将鼠标指针移动到其上方时使用这些值。

应该使用CSS类：
CSS：

#layout-three-liquid2 #section-navigation ul li a.current{

    background-color:white;
}

HTML：

<ul>
   <li><a class="current" href="#page1">Home</a></li>
   <li><a href="#page3">Replies</a></li>
</ul>

Answer 4

请注意：active不表示您当前所在的页面，只表示正在单击该链接。（它也可以在框架集中工作）

你必须做一些服务器端脚本来将类设置为link_active或类似的东西。

在css中使用活动和悬停链接？

4 个答案: