CSS中的数量查询

在一些 页面效果中我们可能对数量达到n以及未达到n的列表做特殊的处理。这就要求我们使用到css的数量查询。

在制作相应式页面时，在不同分辨率下可能column会有不同的排列方式。

css中的计数

1.数一个的情况

:only-child和:only-of-type

2.数N个

前面通过:only-child或:only-of-type数到只有一个元素的列表，配合:not(only-child)或:not(:only-of-type)可以数到列表项目数大于一个元素的所有列表。

既然:nth-last-child(6):first-child可以选择到第一个，而:nth-last-child(6):first-child ~ li可以选择到第2~6个li。如此一来，将这两个选择器组合在一起，就可以选择只有6个li的列表，也就达到我们需要的目标：

li:nth-last-child(6):first-child,
li:nth-last-child(6):first-child ~ li

3.数大于或等于N个

，如果我们要选择的列表数大于6个的所有li时，可以通过:nth-last-child(n+6)结合:nth-last-child(n + 6) ~ li完成

4.数小于或等于N

li:nth-last-child(-n + 6):first-child,
li:nth-last-child(-n + 6):first-child ~ li

5.数大于N小于M

li:nth-last-child(n + 4):nth-last-child(-n+6):first-child,
li:nth-last-child(n + 4):nth-last-child(-n+6):first-child ~ l