css – 选择最后3个孩子

前端之家收集整理的这篇文章主要介绍了css – 选择最后3个孩子前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我知道你可以选择最后的寒意:last-child。现在我需要选择最后3个孩子唯一的问题是孩子的数量不知道所以我不能使用:n-child,我知道有一些被称为:nth-​​last-child但我真的不明白这是怎么回事加工
<div id="something">

    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <!-- here some more

    and than i need to select these -->
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>
    <a href="images/x.jpg"  ><a/>

</div>

所以现在我需要这样的东西:

#something a:last-child{
   /* only now it needs to select 2 more a's that are before this child */ 
}

解决方法

你可以阅读更多关于最后一个孩子的 here,但这基本上应该只用CSS选择最后3个孩子
#something a:nth-last-child(-n+3) {
    /*declarations*/
}

来自FabrícioMatté的fiddle示威

这只会选择那些为out N表达式返回正数的行(-n 3),并且因为我们使用的是nth-last-child,所以它从最后一个到第一个,
所以从底部的第一行给出,

f(n) = -n+3
f(1) = -1+3 = 2 <- first row from the bottom
f(2) = -2+3 = 1 <- second row from the bottom
f(3) = -3+3 = 0 <- third row from the bottom

其他一切都会返回一个负数

原文链接:https://www.f2er.com/css/217889.html

猜你在找的CSS相关文章