Question

一个月前，我也发布了同样的问题，但是我缺少使我的单词更有意义的代码。因此，这里有一个更好，更有条理的：

我在尝试了解父子页面菜单在wordpress上的工作时遇到了一些麻烦。我有以下代码：

左侧边栏的menu.php（在我的functions.php中，此特定文件没有任何内容）：

<div class="col-md-3 dadin-menu">
  <ul class="nav nav-tabs nav-stacked dadin-menu-left">
    <li><a href="<?php echo get_bloginfo( 'wpurl' );?>">Home</a></li>
    <?php wp_list_pages('title_li=') ?>
    <li><a href="http://www.utfpr.edu.br" target="_blank" rel="noopener">UTFPR</a></li>
  </ul>

页面嵌套在wordpress的菜单选项卡中。 wp_list_pages拉动这些页面以显示在侧栏上，但是问题是我无法使用CSS正确自定义它。就像其他两个链接（不在wp_list_page内部）一样，我希望将其悬停时突出显示，但是wp_list_pages内部的页面将突出显示为单个框/元素，而不是突出显示为单个线元素。我知道这很令人困惑，因此我尝试在这个小提琴中更有意义：http://jsfiddle.net/kxbo1g0h/37/。在这里您可以看到我为每个

该博客，如果您想了解一下它现在的工作方式以及我的工作，以仅突出显示单个块而不是整个嵌套子对象：http://dadin.ct.utfpr.edu.br/可以，但是这个主意是要使高亮显示占据容器内部的整个行空间，而不仅仅是其中的一部分。

另一个问题的链接，其中包含一些“解释性”图像，以显示正在发生的事情以及我希望它看起来像什么： Wordpress Parent-Child Pages Menu - background highlighted on list

Answer 1

使用ul ul和ul ul ul定位子孙。或ul > ul（对于选择器来说更精确）。

ul ul选择另一个ul中的所有ul，
ul > ul仅选择那些位于原始ul以下第一级的ul。
请参阅以下内容以供参考：https://www.w3schools.com/cssref/css_selectors.asp

这是您的小提琴经过了调整，无需上课就能更好地解释它：

http://jsfiddle.net/kxbo1g0h/41/

ul, li {
  margin: 0;
  padding: 0;
}

.container {
  padding: 0 15%;
}

.container h4 {
  padding-left: 0;
  font-size: 25px;
  font-family: arial;
}

.ul-container {
  padding: 0 10%;
}

ul a {
  text-decoration: none;
  color: #333;
}


ul li {
    padding-left: 15%;
    border: none;
    margin: 0 auto;
    list-style-type: none;
    font-size: 16px;
    padding-bottom: .3em;
    padding-top:.3em;
    border-bottom: 1px solid #CDCDCD;
    border-width: 15%; /*nao funciona*/
    text-transform: uppercase;
}

ul li:hover,
ul li:focus {
  background: #ccc;
  cursor: pointer;
}

ul > ul > li {
  background: none; 
  text-transform: lowercase;
/*  padding-left: 15%;
  display: block;*/
}

ul > ul > li:hover,
ul > ul > li:focus {
  background: #888;
  color: white;
  cursor: pointer;
}

ul > ul > li > a {
  padding-left: 15%;
}

ul > ul >ul >  li:hover,
ul > ul >ul > li:focus {
  background: red;
}

ul > ul >ul > li > a {
  padding-left: 30%;
}

<div class="container">
<h4>
Lista Menu
</h4>
</div>

<div class="ul-container">


<ul>
<li><a href="#">item 1</a></li>
  <ul>
    <li><a href="#">child 1</a></li>
    <li><a href="#">child 2</a></li>
      <ul>
        <li><a href="#">grandkid 1</a></li>
        <li><a href="#">grandkid 2</a></li>
        <li><a href="#">grandkid 3</a></li>
      </ul>
    <li><a href="#">child 3</a></li>
    <li><a href="#">child 4</a></li>
  </ul>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
</ul>

</div>

Answer 2

为什么不使用CSS？

f.e。

.dadin-menu-left ul>li>ul>li:hover {background:red !important}

这将使孩子的li背景变色。

.dadin-menu-left ul>li:hover {background:red !important}

这将使父项着色。

WordPress亲子页面菜单-wp_list_pages上的类？

2 个答案: