css - 更改当前选定 li 的 css

Question

我有这个菜单：

<div id="menu-home">
    <ul>
        <li> a </li>
    </ul>
</div>

当我在test.php对应于测试菜单的页面上时，我需要它li具有不同的样式..

我试过

#menu-home ul li:active 

但它没有用..

谢谢

Answer 1

没有:active状态<li>

相反，您可以使用 PHP 来完成。

<div id="menu-home">
<ul>
<li <?php if (page is current page) echo ' class="active"';?>> a </li>
</ul>
</div>

在 CSS 中，您可以给出：

#menu-home ul li.active {}

Answer 2

该<li>元素没有活动状态，因为它只是一个（无状态）项目符号点。选择器:active只能用于链接；一个例子可以在这里找到。

但是，:active只会在单击链接时突出​​显示该链接。之后，它会执行设置为执行的任何操作和/或导航，然后将访问该链接。从那里开始，您无法将其与您当前未查看的其他已访问页面区分开来，并且即使您导航到另一个页面，它也不会再次“未访问”。所以这不符合你的意图。

相反，我会.active在您的 CSS 中创建一个类，您可以在其中定义所有自定义样式。然后，生成您的页面的 PHP 需要注意在选定的菜单项上正确设置类，即：在构建菜单时将其附加class="active"到<li>或<a>。

（是的，只需查看 Praveen 对代码的回答 ^^）