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

Question

我想用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个.

任何帮助,将不胜感激.

谢谢

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