利用 :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]