php - Wordpress 父子页面菜单 - wp_list_pages 上的类？

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/. 在这里你可以看到我为每个<ul>创建了类，我可以用css分别定位它们。没有突出显示特定嵌套列表上的所有元素！但我确实明白这不是它与 wp_list_pages 一起工作的方式，所以我只需要一点帮助，了解如何使小提琴代码上发生的事情与我在 menu.php 文件中的内容一起工作。

该博客，如果你想看看它现在是如何工作的，我的工作是只突出单个 < a > 块而不是整个嵌套的孩子：http ://dadin.ct.utfpr.edu.br /我在这里有点工作，但想法是让亮点占据其容器内的整个行空间，而不仅仅是它的一部分。

我的另一个问题的链接有一些关于正在发生的事情和我希望它看起来像什么的“解释性”图像： Wordpress Parent-Child Pages Menu - 背景在列表中突出显示

标签： phpcsswordpress

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>