javascript - 选择一个 div 内的第一个 div，但前提是有 10 个 div

Question

我想在 #user-favourites-card 中选择第一个 div.favourite-image 只有恰好有 10 个 div.favourite-image 在 #user-favourites-card 内。

我的尝试:

#user-favourites-card div.favourite-image:nth-last-child(10):first-child

要从中选择的 html:

<div _ngcontent-qcm-36="" class="card-noshadow" id="user-favourites-card">
   <div _ngcontent-qcm-36="" class="first-card-header">
      <h6 _ngcontent-qcm-36="">Favourites</h6>
   </div>
   <div _ngcontent-qcm-36="" class="row">
      <!--template bindings={
  "ng-reflect-ng-for-of": "[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]"
}--><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_parmesan_alternative_original.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mozzarella_alternative.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_tasty_cheese_sauce.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_mild_cheese_mix.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/sugar_free_dark_chocolate_salted_caramel.png&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_drink_for_professional.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_custard.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_coconut_dessert.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/alpro_creamy_caramel.jpg&quot;);"></div>
      </div><div _ngcontent-qcm-36="" class="col-sm-6 col-md-4 col-xl-4">

         <div _ngcontent-qcm-36="" class="favourite-image" ng-reflect-ng-style="[object Object]" style="background-image: url(&quot;result-images/dairy_free_sour_cream_alternative.jpg&quot;);"></div>
      </div>
   </div>
</div>

旁白:我想选择这个确切的元素来证明在 Jasmine 测试中恰好有 10 个元素。

This page展示了如何做到这一点。我做错了什么？

Answer 1

您的尝试没有像您期望的那样正确选择子项。您会注意到，如果您只使用 :first-child 来尝试您的选择器它什么都不做。每个<div class="col-sm-6 col-md-4 col-xl-4"></div>是 row 之后的直接子代类(class)。任何 :child 之类的选择器都需要您操作直接的父子关系，因此您的额外 div 会掩盖这一点。

相反，您可以试试这个选择器:

#user-favourites-card .row div:nth-last-child(10):first-child .favourite-image

As seen in this fiddle.

或者，如果您添加 favourite-image class 和你的列类一起，然后你可以坚持使用你之前尝试过的选择器。

例如:

<div class="col-sm-6 col-md-4 col-xl-4 favourite-image">
   ...
</div>

As seen in this fiddle.