读《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,,,个=>子元素数目>2first-child:nth-last-child(-n+4)
=>即是第1个,又是倒数第1,2,3,4个=>子元素数目<=4first-child:nth-last-child(-n+4):nth-last-child(n+2)
=>即是第1个,又是第2,3,4,,,个,又是倒数第1,2,3,4个=>子元素数目[2,4]