使用数量查询使您CSS数量感知

数量查询是专门设置CSS选择器 ，可让开发人员使他们的代码感知数量 。在响应式设计中，我们通常使用媒体查询来使我们的设计适应不同的视口。但是，在某些情况下，在屏幕上出现一定数量的相同内容类型后 ，我们可能希望切换到不同的布局或使用其他尺寸或外观。

另请参阅： 查看CSS样式优先级

动态网站经常出现问题，我们并不总是事先知道屏幕上将显示多少个项目 。考虑博客文章末尾的标签，电子商务网站导航中的特定产品过滤器或现场搜索结果。在这种情况下， 数量查询可以为我们提供一种优雅的纯CSS解决方案，并使我们免于使用JavaScript的麻烦。

数量查询的组成方式

我们可以建立三种数量查询 ：

当屏幕上的同一内容类型超过一定数量时， “至少”查询 。
当屏幕上少于相同数量的相同内容类型时， “最多”查询 。
当屏幕上的相同内容类型的数量大于某个数量但小于另一个数量时， “之间”查询 。

所有三种类型的数量查询都是使用:nth-last-child CSS伪类和常规的同级选择器（ ~ ）来构建的，而“至多”和“介于”查询也使用:first-child伪类 。

:nth-last-child伪类的行为与:nth-child类似，但是它从最后一个子代开始计数 ，而通用的同级选择器（ ~ ） 选择所有在某个同级元素之后的元素 。

推荐读物： Web设计：CSS3伪类指南

“至少”查询

要了解的最重要的一点是，数量查询会选择属于同一父元素的所有元素 ，因为目标是为满足数量标准的所有元素分配相同的设计 。

在下面的代码片段中，我们选择无序列表中的所有<li>元素，该列表至少包含五个list元素 。

/* "At-least" query */
ul li:nth-last-child(n+5),
ul li:nth-last-child(n+5) ~ li {
  background-color: orange;
}

如您所见，“至少”查询由两个CSS选择器组成 。第一个选择器ul li:nth-last-child(n+5)选择距离最后一个child至少五个元素的所有<li>元素。但是，仅靠样式规则是不够的，因为它不能使所有元素看起来都一样-最后四个元素将保持其原始样式。这就是为什么我们需要添加第二个选择器，以选择先前选择的元素的所有常规同级 。

回到示例代码，它将橙色背景添加到具有至少五个元素的无序列表的所有元素中 ，而少于五个<li>元素的无序列表将保留其默认（蓝色）颜色 。您可以在下面的Codepen笔中实时测试 “至少”查询的工作方式。

“最多”查询

“最多”查询也由两个选择器组成 ，但是它们不仅依赖:nth-last-child伪类，还依赖:first-child 。下面的示例代码选择属于一个无序列表的所有<li>元素，这些元素最多具有五个列表元素 。

/* "At-most" query */
ul li:nth-last-child(-n+5):first-child,
ul li:nth-last-child(-n+5):first-child ~ li {
  background-color: orange;
}

第一个选择器的第一部分:nth-last-child(-n+5)使用负值来交换选择的方向 -它仍然从最后一个子项开始计数（这是选择项的内置特性） :nth-last-child伪类），但现在它会选择最后五行 （即不是至少五行从最后一个孩子远）的元素。该选择器选择任何无序列表的最后五个元素，但是我们只希望选择具有最多五个元素的元素 （这样，将选择所有元素）。

这就是为什么我们需要将其与:first-child伪类结合使用，该伪类将选择先前选择的列表元素的第一个元素，但仅适用于同时也是其<ul>父元素的第一个孩子的元素，这是唯一的用于最多包含五个<li>元素的无序列表。

现在，除了添加第二个选择器 ，我们无需执行任何操作，它将选择先前选择的:first-child元素的常规同级 。就是这样，我们的“至多”查询已完成。您可以在下面的实时演示中试用CSS代码，以了解其工作原理。

“之间”查询

“介于”查询结合了我们用于“至少”和“最多”查询的代码。下面的代码示例选择无序列表中包含最少五个但最多六个列表元素的所有元素 。

/* "Between" query */
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child,
ul li:nth-last-child(n+5):nth-last-child(-n+6):first-child ~ li {
  background-color: orange;
}

为了构建“之间查询”，我们将属于适当的“至少”和“最多”查询CSS选择器串联起来 。在我们的示例中，“至少”查询是:nth-last-child(n+5) ，而“最多”查询是:nth-last-child(-n+6):first-child ，我们只需加入冒号即可 。

用例

数量查询有许多有趣的用例，从内容感知导航到自动网格系统，以下是一些最佳的集合：

单独列出：如何构建内容感知导航
Tomango：标签列表和灵活的网格系统
Charlotte Jackson的博客：数量查询的代码实验
Codepen： Vincent Durand的自动网格系统
Codepen：使用数量查询的图像网格和Lucas Lemonnier的Flexbox
Codepen： Craig Morey的可折叠链接列表

建立数量查询的工具

有一些出色的开发人员工具可以帮助您更轻松地建立数量查询 。

翻译自: https://www.hongkiat.com/blog/quantity-queries-css-quantity-aware/

使用数量查询使您CSS数量感知

数量查询的组成方式

“至少”查询

“最多”查询

“之间”查询

用例

建立数量查询的工具

数量查询生成器

SASS的数量查询混合

用于数量查询的PostCSS插件