CSS 选择子菜单答案

【问题标题】：CSS select sub-menuCSS 选择子菜单
【发布时间】：2013-11-24 02:30:43
【问题描述】：

大家！我正在为我自己的网站创建一个 wordpress 模板，我需要一个下拉多级菜单。我已经管理 wordpress 将第一个子菜单级别输出为“子菜单”，将第二个子菜单级别输出为“子子菜单”。但我需要单独访问每个子菜单。我在以下上下文中尝试了 :first-child 或 :nth-child(x)：

.sub-sub-menu:nth-child(2) { /*selects both sub-sub-menus*/
    background: red;
}
.sub-sub-menu:nth-child(1) { /*doesnt work*/
    background: red;
}

但他们都没有工作。这是我的 wordpress 生成的代码：

<section id="menu">
  <div id="menu_container" class="menu-header_menu-container">
    <ul id="menu-header_menu" class="menu">
      <li id="menu-item-26" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-26">
        <a href="http://localhost/wordpress">
          Home
        </a>
      </li>
      <li id="menu-item-162" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current_page_ancestor menu-item-162">
        <a href="http://localhost/wordpress/?page_id=136">
          Page 1
        </a>
        <ul class="sub-menu">
          <li id="menu-item-193" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-193">
            <a href="http://localhost/wordpress/?page_id=192">
              subpage 1
            </a>
            <ul class="sub-sub-menu">
              <li id="menu-item-200" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-200">
                <a href="http://localhost/wordpress/?page_id=196">
                  subsubpage1
                </a>
              </li>
              <li id="menu-item-209" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-209">
                <a href="http://localhost/wordpress/?page_id=204">
                  subsubpage2
                </a>
              </li>
            </ul>
          </li>
          <li id="menu-item-188" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-188">
            <a href="http://localhost/wordpress/?page_id=187">
              subapge2
            </a>
            <ul class="sub-sub-menu">
              <li id="menu-item-217" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-217">
                <a href="http://localhost/wordpress/?page_id=214">
                    subsubpage1
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="menu-item-161" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-161">
        <a href="http://localhost/wordpress/?page_id=138">
         Page 2
        </a>
      </li>
      <li id="menu-item-168" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-168">
        <a href="http://localhost/wordpress/?page_id=167">
          Page 3
        </a>
      </li>
      <li id="menu-item-172" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-172">
        <a href="http://localhost/wordpress/?page_id=171">
          Page 4
        </a>
      </li>
    </ul>
  </div>
</section>

链接到jsfiddle

【问题讨论】：

标签： html css wordpress

【解决方案1】：

要定位第一个.sub-sub-menu，您可以使用：

.sub-menu .menu-item:nth-child(1) .sub-sub-menu {
    background: red;
}

第二个：

.sub-menu .menu-item:nth-child(2) .sub-sub-menu {
    background: red;
}

Demo

【讨论】：