Question

我想使用nth-child选择最后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>

Answer 2

您可以这样做，

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

Answer 3

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

Answer 4

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

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

4 个答案: