如何使用第 n 个孩子选择最后 4 个元素？答案

【问题标题】：how to select the last 4 elements using nth child?如何使用第 n 个孩子选择最后 4 个元素？
【发布时间】：2019-01-21 22:51:31
【问题描述】：

我想使用 nth-child 选择最后 4 个元素。有没有办法做到这一点？

我无法为这些孩子添加唯一的类，因此我需要一种方法来识别最后 4 个孩子，以便我可以在不影响其他孩子的情况下对其进行编辑？

我正在为 Wordpress 使用高级自定义字段，因此我的代码如下所示：

<div class="all-skills-div">
            <?php
                if( have_rows('skills') ):
                while( have_rows('skills') ):
                the_row();
            ?>
                <div class="single-skill-div">
                   <?php echo the_sub_field('a_skill'); ?>
                </div>
            <?php 
                endwhile;
                endif;
            ?>
</div>

子字段正在输出大约 9 行不同的文本（现在，但由于它是动态的，这可能会改变）所以我想定位最后 4 行。

任何帮助将不胜感激。

谢谢

【问题讨论】：

标签： jquery css sass css-selectors

【解决方案1】：

试试看：

ul li {
  display: inline-block;
  width: 100%;;
}

ul li:nth-last-child(-n+4) {
  color: red;
}

<ul>
  <li>1</li>  
  <li>2</li>  
  <li>3</li>
  <li>4</li>  
  <li>5</li>  
  <li>6</li>  
  <li>7</li>  
  <li>8</li>  
  <li>9</li>  
</ul>

【讨论】：

请提供 HTML 和 CSS 代码或 jsfiddle。所以，我可以帮你。
感谢您的建议，我现在可以正常工作了！非常感谢。我在 Google 上查找时找不到我要查找的内容:)

【解决方案2】：

您可以使用 nth-last-child - nth generator

【讨论】：

【解决方案3】：

您可以对最后四个子字段使用 CSS #something:nth-last-child(-n+4)。

【讨论】：

【解决方案4】：

你可以这样做，

$('#something a:nth-last-child(-n+4)').hide();

【讨论】：