Question

我正在使用WordPress网站，我的菜单显示为，

<li  class="current-menu-parent current-menu-item "><a  href="#">SHOP</a>
    <ul class="sub-menu">
        <li class="menu-item-517 current-menu-item"><a href="#">Engine1</a></li>
        <li class="current-menu-item menu-item-516 current-menu-item"><a href="#">Engine2</a></li>
        <li class="menu-item-517 current-menu-item"><a href="#">Engine3</a></li>    
    </ul>
</li>

Engine2是我当前活动的页面。类current-menu-item在我的活动子菜单li中重复2次。如何使用css选择当前活动的子菜单？

我试过

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

但没有工作。

请帮帮我......

here是指向我网站的链接。请访问商店下方的下拉菜单。

Answer 1

如何使用css选择我当前活动的子菜单？

鉴于你的具体例子;具有重复类的元素首先是current-menu-item，而其他元素则没有。在这种情况下，您可以使用“属性开头”运算符：[attr^=value]。 reference

[class^=current-menu-item]{
  background-color: yellow;
}

<li  class="current-menu-parent current-menu-item "><a  href="#">SHOP</a>
    <ul class="sub-menu">
        <li class="menu-item-517 current-menu-item"><a href="#">Engine1</a></li>
        <li class="current-menu-item menu-item-516 current-menu-item"><a href="#">Engine2</a></li>
        <li class="menu-item-517 current-menu-item"><a href="#">Engine3</a></li>    
    </ul>
</li>

这是非常具体的，如果对菜单进行了更改，则容易破裂。真正的解决方法是修复菜单项中的类。

选择具有相同类别的元素2次

1 个答案: