ul:has(li:nth-child(n):last-child)
:has()
选择器是CSS的父选择器,可以检查父元素是否包含特定的子元素li:nth-child(4):last-child
表示:第4个子元素且是最后一个子元素- 当这个条件成立时,说明总共有4个li元素
ul:has(li:nth-child(4):last-child)
就是选择包含4个li的ul元素
li:nth-child(k):nth-last-child(n-k+1)
li:nth-child(2)
选择第2个li元素:nth-last-child(3)
从后往前数第3个元素- 所以
li:nth-child(2):nth-last-child(3)
正好匹配第2个li,且只在总共有4个li时生效
n
的范围是 [0, +∞),即 n = 0, 1, 2, 3, ...n+b
的计算结果:b, b+1, b+2, b+3, ...- 例如
n+3
:当 n=0 时选中第3个,n=1 时选中第4个,n=2 时选中第5个... - 所以
nth-child(n+b)
选中从第 b 个开始的所有子元素
n
的范围是 [0, +∞),即 n = 0, 1, 2, 3, ...-n+b
的计算结果:b, b-1, b-2, b-3, ...- 例如
-n+4
:当 n=0 时选中第4个,n=1 时选中第3个,n=2 时选中第2个,n=3 时选中第1个 - 所以
nth-child(-n+b)
选中第 b 个(包括 b)前的所有子元素
li:nth-child(n+a):nth-child(-n+b)
nth-child(n+a)
确保从第 a 个开始选择nth-child(-n+b)
确保到第 b 个结束选择- 两个条件同时满足才能被选中,形成交集
- 例如
nth-child(n+2):nth-child(-n+3)
: n+2
选中:第2, 3, 4, 5, 6... 个元素-n+3
选中:第3, 2, 1 个元素- 交集就是:第2, 3 个元素