利用 :first-child 和 :nth-last-child 确定子元素数目

读《css揭秘》时,发现选择器的神奇作用,可以确定子元素数目,比如:

li:first-child:nth-last-child(2),li:first-child:nth-last-child(2)~li {
  background-color:pink;
}

这个适用于第一个子元素为li且父元素拥有2个子元素,则第一个li和后续的li都将适用,并且如果有更多或更少的子元素都不会适用。

仔细思考下其中的核心逻辑:

  • first-child:nth-last-child(2)=>即是第1个,又是倒数第2个=>总共有两个子元素

利用选择器还可以继续拓展:

  • first-child:nth-last-child(n+2)=>即是第1个,又是第2,3,4,,,个=>子元素数目>2
  • first-child:nth-last-child(-n+4)=>即是第1个,又是倒数第1,2,3,4个=>子元素数目<=4
  • first-child:nth-last-child(-n+4):nth-last-child(n+2)=>即是第1个,又是第2,3,4,,,个,又是倒数第1,2,3,4个=>子元素数目[2,4]
posted @ 2018-05-07 15:32  xianshenglu  阅读(1048)  评论(0编辑  收藏  举报