Question

我无法访问此文档中的html，而我尝试选择的元素具有与其他元素共享的ID（优惠券）（选择任一元素都可以，因为它们是相同的）。所以如果有人能告诉我如何在不使用ID作为钩子的情况下选择其中一个，我就会徘徊。

<div class="buttons">

   <div class="discount-module">
            <div id="coupon" class="content" style="display: none;">
              Enter your coupon code code here:&nbsp;
              <input type="text" name="coupon" value="">
              &nbsp;<a id="button-coupon" class="button"><span>Apply coupon</span></a>
            </div>
                                      <div id="vc-messages"></div>
          <div>
            <table class="radio">
                                <tbody><tr class="highlight">
                <td>                      <input type="radio" name="next" value="coupon" id="use_coupon">
                  </td>
                <td><label for="use_coupon">Use coupon Code</label></td>
              </tr>
                                                                 </tbody></table>
          </div>

          <div class="discount-module">
            <div id="coupon" class="content" style="display: none;">
              Enter your coupon code code here:&nbsp;
              <input type="text" name="coupon" value="">
              &nbsp;<a id="button-coupon" class="button"><span>Apply coupon</span></a>
            </div>
            <div id="voucher" class="content" style="display: none;">
              Enter your voucher code code here:&nbsp;
              <input type="text" name="voucher" value="">
              &nbsp;<a id="button-voucher" class="button"><span>Apply voucher</span></a>
            </div>
            <div id="reward" class="content" style="display: none;">
              Points to use (Max 0):&nbsp;
              <input type="text" name="reward" value="">
              &nbsp;<a id="button-reward" class="button"><span>Apply reward</span></a>
            </div>
          </div>

Answer 1

HTML中确实不应该有重复的ID，因为它无效，所以如果可能的话，我会避免选择ID。但是，由于在这个特定情况下它看起来不像你可以采用的一种方法。

第一张优惠券

.discount-module:first-of-type #coupon {
}

第二张优惠券

.discount-module:nth-of-type(2) #coupon {
}

如果您保证#coupon div将成为.discount-module div中的第一个div元素。你可以使用像

这样的东西

.discount-module:first-of-type > div:first-of-type

无需访问html即可定位元素

1 个答案: