选择div中的第一个div，但仅限于其中的10个

Question

我希望只有在div.favourite-image内只有10 #user-favourites-card时才会选择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>

除此之外：我想要选择这个确切的元素来证明其中有10个完全符合Jasmine测试。

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

Answer 1

您的尝试并没有像您期望的那样正确选择孩子。您会注意到，如果您仅使用:first-child试用选择器，那么它就无法执行任何操作。每个<div class="col-sm-6 col-md-4 col-xl-4"></div>都是row课程后的直接孩子。任何：像选择器一样的孩子要求你对父母与子女的直接关系进行操作，所以额外的div会掩盖这一点。

相反，您可以尝试使用此选择器：

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

As seen in this fiddle.

或者，如果您在列类旁边添加favourite-image类，则可以坚持使用之前尝试过的选择器。

例如：

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

As seen in this fiddle.

Answer 2

如果querySelectorAll节点列表的长度恰好为10，则获取它的第一个元素：

favImg = function() {
  favImgList = document.querySelectorAll('#user-favourites-card div.favourite-image');
  return (favImgList.length == 10) ? favImgList[1] : 'null';
}
console.log(favImg());

<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>