如何從沒有class或id的選單中選擇子選單？-有解無憂

下面是我正在處理的 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>

有兩個具有相同子選單類的選單，即 . 我只想從 ul 中選擇一個子選單，即 id="main-nav。我只想要水果的子選單。我嘗試了 #main-nav li::nth-child(1) 但它不起作用。那里是兩個（）我要標記子選單的第一個影像的所有子選單

請點擊這里了解更多詳情

uj5u.com熱心網友回復：

您可以使用 CSS 中的相鄰兄弟選擇器來選擇一個sub-menu緊跟在具有 class 的元素之前的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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/456314.html

標籤：javascript html css dom 柏

上一篇：如何將提交點擊事件連接到輸入值以查詢api

下一篇：為什么CommonLisp著名的庫Dexador不適用于這個HTTPPOST請求案例？這是一個錯誤還是我錯過了什么？