选择div内的第一个div，但仅当其中有10个时

只有在#user-favourites-card内部确切存在10 div.favourite-image时，我才选择#user-favourites-card中的第一个div.favourite-image。选择div内的第一个div，但仅当其中有10个时

我尝试：

#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正好在茉莉花测试。

This page显示了如何完成。我究竟做错了什么？

来源

2016-12-03 BeniaminoBaggins

你可以清理一点点的HTML。有很多减价与问题无关，而且很难阅读。（例如图片） – vals

@vals，但有人会说他们需要查看浏览器输出的所有html。 – BeniaminoBaggins

@vals是正确的。大多数标记妨碍我们来帮助你。如果你让你的代码可执行，它也会很棒。 –

要获得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>

来源

2016-12-03 09:15:17 SLePort

您尝试不正确地选择了孩子，你会期望。你会注意到，如果你只用:first-child来尝试你的选择器，那它就什么都不做。每个<div class="col-sm-6 col-md-4 col-xl-4"></div>是继row课后的直接子女。任何：孩子喜欢选择器要求你操作直接的父母对子女的关系，所以你的额外divs掩盖了。

相反，你可以试试这个选择：或者

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

来源

2016-12-03 09:37:04

选择div内的第一个div，但仅当其中有10个时

回答

相关问题