Question

我在页面上有自定义菜单：

<ul id="menu">
   <li id="menu-item-148" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-148 publish">
       <a href="http://url/site/index.php/products/product-name/">Information<span class="circle">•</span></a>
   </li>
   <li id="menu-item-149" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor menu-item-149 publish">
       <a href="http://url/site/index.php/products/product-name/register/">Register<span class="circle">•</span></a>
   </li>
   <li id="menu-item-150" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-150 publish">
       <a href="http://url/site/index.php/products/product-name/support/">Support<span class="circle">•</span></a>
   </li>
   <li id="menu-item-151" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-151 publish">
       <a href="http://url/site/index.php/products/product-name/downloads/">Downloads<span class="circle">•</span></a>
   </li>
</ul>

信息是其他3

的父页面

我有以下的CSS，但它根本没有被识别，它没有显示在fire-bug中被覆盖，它似乎不存在，但不确定为什么？

.current_page_ancestor > a,
.current-menu-ancestor > a  { border: 1px solid red; color: red; background-color: blue; }

如果我从CSS中删除.current-menu-ancestor >，那么样式会影响所有链接

Answer 1

在CSS更改中：

current_page_ancestor

要：

current-page-ancestor

但请务必查看wordpress cusom菜单walker。

新的ul内的子项目对于seo来说更好更好。

Answer 2

我会使用它，它也是我在主题开发中设置WordPress菜单样式的方式。

定位主导航＆gt;孩子＆gt;孩子的孩子

#menu > li > a { border: 1px solid red; color: red; background-color: blue; }

CODEPEN DEMO

或

.current-page-ancestor > a { border: 1px solid red; color: red; background-color: blue; }

CODEPEN DEMO

Wordpress菜单 - css选择器问题

2 个答案: