qq导航css_使用QQ Builder生成CSS数量查询

很少有开发人员在其网站上了解或使用CSS数量查询 。 这是一个相当复杂的功能，但是在容器中有多个项目时也很有用。

数量查询可以基于子元素的预定义限制来更改/更新CSS属性 。 例如，如果列表中有三个以上的项目 ，则可以使字体变小以节省空间。 另一个示例是根据导航菜单中的链接数 更新链接的宽度 。

诸如此类的任务会很快变得复杂，但是由于使用了数量查询生成器，因此您无需记住任何令人困惑的语法。

此网络应用程序会为您生成所有代码，以节省时间。 您需要从三个下拉菜单中进行选择 ，以自定义数量查询。 他们像这样工作：

• 选择器 –应该计算哪个子元素
• 查询类型 –选择“至多”，“至少”或“至多”和“至少”的组合
• 数量 –要过滤的项目总数

这在代码中似乎令人困惑，但这是一个非常简单的概念。 数量查询使您可以基于子元素总数应用CSS属性。

因此，当至少有 4个子元素（4个或更多）时，您可以添加某些CSS样式 。 或者， 仅当 最多有四个子元素（0-4个子元素） 时才可以添加样式 。

组合选择器使您可以准确定义显示某些CSS属性所需的最小和最大子级数。

在上面的屏幕快照的示例中，我将“最多”项的总数设置为2。这意味着当我有0、1或2个孩子时，块为红色。 如果我再增加一个来获得3个孩子，则所有块都变成蓝色。

如果您不知道发生了什么，可以单击侧栏中的小信息框 。 它将打开一个模态窗口，其中包含说明数量查询功能的事实和语法 。

对于初学者和经验丰富的开发人员来说，这都是一个非常方便的工具。 从长远来看，它将节省大量时间 ，并且将帮助您创建更多动态网站 。

首先，请访问QQ构建器网站并开始自定义功能 。 您可以对结果进行调整，并在右窗格中查看实时预览 ，以了解您的更改如何影响子元素。

该项目在GitHub上也可用，因此您可以自由查看源代码 ，甚至可以在本地下载副本 。 如果您喜欢这个应用程序，或者对创作者Drew Minns有任何疑问/建议，可以给他快速发一条@drewisthe推文。

翻译自: https://www.hongkiat.com/blog/quantity-query-builder/