使用QQ Builder生成CSS数量查询
这是一个相当复杂的功能，但是在容器中有多个项目时也很有用。
很少有开发人员在其网站上了解或使用CSS数量查询 。
另一个示例是根据导航菜单中的链接数 更新链接的宽度 。
例如，如果列表中有三个以上的项目 ，则可以使字体变小以节省空间。
数量查询可以基于子元素的预定义限制来更改/更新CSS属性 。
诸如此类的任务会很快变得复杂，但是由于使用了数量查询生成器，您无需记住任何令人困惑的语法。
他们像这样工作：
您需要从三个下拉菜单中进行选择 ，以自定义数量查询。
此网络应用程序会为您生成所有代码，以节省时间。
- 选择器 –应该计算哪个子元素
- 查询类型 –选择“至多”，“至少”或“至多”和“至少”的组合
- 数量 –要过滤的项目总数
数量查询使您可以基于子元素的总数来应用CSS属性。
这在代码中似乎令人困惑，但这是一个非常简单的概念。
或者， 仅当 最多有 4个子元素（0-4个子元素） 时才可以添加样式 。
因此，当至少有 4个子元素（4个或更多）时，您可以添加某些CSS样式 。
组合选择器使您可以准确定义显示某些CSS属性所需的最小和最大子级数。
如果我再增加一个来获得3个孩子，则所有块都变成蓝色。
在上面的屏幕截图的示例中，我将“最多”项的总数设置为2。这意味着当我有0、1或2个孩子时，块为红色。
它将打开一个模态窗口，其中包含说明数量查询功能的事实和语法 。
如果您不知道发生了什么，可以单击侧栏中的小信息框 。
从长远来看，它将节省大量时间 ，并且将帮助您创建更多动态网站 。
对于初学者和有经验的开发人员来说，这都是一个非常方便的工具。
您可以对结果进行调整，并在右窗格中查看实时预览 ，以了解您的更改如何影响子元素。
首先，请访问QQ构建器网站并开始自定义功能 。
如果您喜欢这个应用程序，或者对创作者Drew Minns有任何疑问/建议，可以给他快速发一条@trewisthe推文。
该项目在GitHub上也可用，因此您可以*查看源代码 ，甚至可以在本地下载副本 。