Cypress

Question

下面是我正在处理的html：
`

<li xpath="1">
                <a href="#" onclick="clearNewTabInvoiceDetails()" class="fruit">Fruits<span class="menu-arrow"></span></a>
                <ul class="sub-menu">
                 <li>
                <a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" class="apple">
                    Apples
                </a>
            </li>
            <li>
                <a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" class="mango">
                    Mangoes
                </a>
            </li>
            <li>
                <a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" class="banana">
                    Pineapples
                </a>
            </li>
            </li>

<li xpath="1">
                <a href="#" onclick="clearNewTabInvoiceDetails()" class="drink">Drinks<span class="menu-arrow"></span></a>
                <ul class="sub-menu">
                 <li>
                <a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" class="coke">
                    Coke
                </a>
            </li>
            <li>
                <a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" class="fanta">
                    Fanta
                </a>
            </li>
          </ul>

有两个菜单具有相同的子菜单 class 即。我只想 select 来自 ul 的一个子菜单，它是 id="main-nav。我只想要水果的子菜单。我试过 #main-nav li::nth-child(1) 但是，它不工作。有两个（）我要标记第一个的所有子菜单 Image of sub menu

Please click here for more detail

`

Answer 1

您可以使用 CSS 中的相邻同级 select 或 + 到 select class sub-menu 的元素紧跟class fruit:

的元素

.fruit+.sub-menu {
  color: red;
}

<li xpath="1">
  <a href="#" onclick="clearNewTabInvoiceDetails()" class="fruit">Fruits<span class="menu-arrow"></span></a>
  <ul class="sub-menu">
    <li>
      <a href="/apple/Index" onclick="clearNewTabInvoiceDetails()" class="apple">
                    Apples
                </a>
    </li>
    <li>
      <a href="/mango/Index" onclick="clearNewTabInvoiceDetails()" class="mango">
                    Mangoes
                </a>
    </li>
    <li>
      <a href="/banana/Index" onclick="clearNewTabInvoiceDetails()" class="banana">
                    Pineapples
                </a>
    </li>
  </ul>

  <li xpath="1">
    <a href="#" onclick="clearNewTabInvoiceDetails()" class="drink">Drinks<span class="menu-arrow"></span></a>
    <ul class="sub-menu">
      <li>
        <a href="/coke/Index" onclick="clearNewTabInvoiceDetails()" class="coke">
                    Coke
                </a>
      </li>
      <li>
        <a href="/fanta/Index" onclick="clearNewTabInvoiceDetails()" class="fanta">
                    Fanta
                </a>
      </li>
    </ul>

Cypress - 如何从没有 class 或 id 的菜单中 select 子菜单？

Cypress - How to select the sub menu from the menu with no class or id?

javascript

html

css

dom