@Heydon Pickering在三月份写过一篇《Quantity Queries for CSS》文章，文章主要介绍如何使用CSS的伪类选择器来找章鱼。前几天@Drew Minns的《Quantity Ordering With CSS》也介绍的是相关内容。觉得这两篇文章非常的有意思，今天也试试来解释这两篇文章运用到的相关知识。

使用场景

不知道大家在平时制作页面的时候是否碰到这样的场景。在不同的断点实现不同的布局效果，如下图所示：

当屏幕到达断点28.75em时，布局变成：

当断点到达43.125em时，布局变成：

咱们先不思考这个效果怎么实现，先来了解实现这个效果的相关知识，也就是我们今天要介绍的CSS数量查询。

为了能更好的阐述这方面的技术，咱们直接使用@Heydon Pickering的《Quantity Queries for CSS》文章示例图。

把章鱼当作HTML元素，其中绿色的章鱼表示与CSS选择器匹配的元素（也就是选中的元素），红色的表示是未选中的元素，而灰色的表示不存在的元素。

CSS中的计数

在CSS中至今为止都没有提供一个明确的计数API，但我们可以通过CSS3的伪类选择器解决同样的问题。

数一个

在CSS3中的:only-child和:only-of-type都可以选择只有一个子元素。来看一个简单的示例：

<ul>
  <li></li>
</ul>
<ul>
  <li></li>
  <li></li>
</ul>

li:only-child{
  background-position: 0 0;
}

很明显，列表ul只要不是一个li时，都不会选中：

反过来，除了只有一个li的列表，其他的ul中的li都被选中。怎么感觉有点绕呢？还是来看示例吧。基于上面的示例，使用:not(only-child)选择,选择列表项目数大于1的所有列表的li：

数N个

前面通过:only-child或:only-of-type数到只有一个元素的列表，配合:not(only-child)或:not(: