第N个孩子在不同页面上的计算方式不同？

Question

我已经使用nth-child（3n + 1）来清除每个第四个元素，并且它在我的类别页面上工作正常（例如：http://riverstarfarms.com/our-products/fruits/）但在我的主要产品页面上它是正常的喜欢它计算错误的第四个元素并清除第三个元素。 http://riverstarfarms.com/our-products/。知道为什么会这样做吗？

Answer 1

您的ul中有一个文章元素抵消了您的计数。 nth-child(n)仅匹配子元素的实际索引，它不会根据选择器的其他条件进行过滤。因此li:nth-child(2)匹配一个元素，如果它既是li又是第二个子节点，而不是第二个子li。

对于上下文，这是有问题的HTML

类别页面

<ul class="products-list">
    <li>1st child</li>
    <li>2nd child</li>
    <li>3rd child</li>
    <li>4th child</li>
</ul>

产品页面

<ul class="products-list">
    <article>1st child</article>
    <li>2nd child</li>
    <li>3rd child</li>
    <li>4th child</li>
    <li>5th child</li>
</ul>