Wordpress：突出显示活动菜单项

Question

我正在处理此website，我正在尝试使用border-bottom活动菜单链接突出显示。正如你所看到的是一个滚动网站，但我无法通过CSS突出显示它。我想在活跃时突出显示MÖGLICHKEITEN - GALERIE - KONTAKT链接。 我试过这个：

CSS：

#dslc-module-84 .dslc-navigation .menu > li > a:active { border-bottom: 1px solid #3da22b !important; }

有什么想法吗？

编辑：

KONTAKT

Answer 1

您需要使用parent child选择器CSS来实现您的目标。

例如，

.menu li.menu-item a._mPS2id-h.mPS2id-clicked.mPS2id-highlight{
    border-bottom: 1px solid #3da22b !important; 
}

您需要定位案例中.menu的主要父级菜单类，然后继续选择其子级，直到您使用所选菜单到达li。完成后，定位它的孩子a以实现您的目标。

希望这有帮助。

Answer 2

Wordpress为当前菜单项提供了类（即：.current-menu-item）。

您应该使用这些选择器为给定的菜单项声明样式规则。

<强>示例：

.menu li[class*="current"] {...}

.menu .current-menu-item {...}

更具体针对您的案例：

.menu li a[class*="-highlight"],.menu li a[class*="-clicked"] {...}

关于您最初尝试使用的:active pseudo-class：

  

：当一个元素存在时，活动的CSS伪类与匹配   由用户激活。它允许页面给出反馈   浏览器已检测到激活。与...交互时   鼠标，这通常是用户按下鼠标之间的时间   按钮并将其释放。 ：active伪类通常也是   使用键盘标签键时匹配。它经常被使用   和HTML元素，但可能不仅限于那些。

（来源：有效 - CSS | MDN）

了解详情： :active - CSS | MDN

Answer 3

请使用：

#dslc-module-84 .dslc-navigation .menu > li.current-menu-item > a {
 color:#eee;
}