如何突出显示父列表项而不突出显示子列表项？

Question

我在使用 Wordpress 生成的链接列表时遇到问题，该列表显示特定页面链接及其所有子页面链接。我试图让链接在您将鼠标悬停在链接上时突出显示，然后当您单击它们并导航到该页面时，该页面的链接保持突出显示。我找到了一种主要使用以下方法实现此目的的方法：

#sidebar a:hover{
    padding: 7px;
    background-color: #f7f9fe;
    color: #728186;
}
#sidebar ul > li .current_page_item{
    padding: 7px;
    background-color: #f7f9fe;
    color: #728186;
}

但这不允许我突出显示父页面/li。如果我使用：

#sidebar li.current_page_item

子项目在其页面上保持突出显示，但在父页面上它也突出显示子项目，而不仅仅是其本身。

这是我解析的 php：

<ul id="sidebar" class="sidelist">
    <li class="pagenav"><h5>WHAT WE DO</h5>
        <ul>
            <li class="page_item page-item-39 current_page_item"><a href="http://www.autismrecoveryfoundation.org/meet-the-board" title="Meet the Board">Meet the Board</a>
            <ul class='children'>
                <li class="page_item page-item-84"><a href="http://www.autismrecoveryfoundation.org/meet-the-board/being-a-board-member-101" title="Being A Board Member 101">Being A Board Member 101</a></li>
            </ul>
            </li>
        </ul>
    </li>   
</ul>

这是我在 WordPress 页面上使用的关于 wp 列表页面的模板标签（http://codex.wordpress.org/Function_Reference/wp_list_pages）：

<?php 
            // use wp_list_pages to display parent and all child pages all generations (a tree with parent)
            $parent = 39;
            $args=array(
             'title_li' => '',
             'child_of' => $parent
            );
            $pages = get_pages($args);  
            if ($pages) {
              $pageids = array();
              foreach ($pages as $page) {
                $pageids[]= $page->ID;
              }

              $args=array(
                'title_li' => '<h5>WHAT WE DO</h5>',
                'include' =>  $parent . ',' . implode(",", $pageids)
              );
              wp_list_pages($args);
            }
        ?>

Answer 1

更新

要在平面列表中显示页面列表，请将深度设置为-1：

$args=array(
  'depth' => -1,
  'title_li' => '<h5>WHAT WE DO</h5>',
  'include' =>  $parent . ',' . implode(",", $pageids)
);

这样您就不必使用子选择器，并且您的子页面会获胜不再包含在主页的 li 中。

---

旧答案

问题出在这个选择器上：

#sidebar ul > li .current_page_item

#sidebar ul部分正在寻找ul，它来自#sidebar >，但在您的代码中 ul 是 #sidebar。此外，li .current_page_item 会在包含您的标题的 li 内找到任何 .current_page_item。

将您的选择器更改为：

#sidebar > li > ul > .current_page_item

您也可以使用它，因为您的页面小部件无论如何都有自己的类：

.pagenav > ul > .current_page_item