CSS中的数量查询

特别声明:为感谢社区广大朋友对小站的支持,自2019年10月1日至2019年11月11日开通年费VIP通道,年费价格为 ¥299.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

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

使用场景

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

Mobile

当屏幕到达断点28.75em时,布局变成:

Two By Two

当断点到达43.125em时,布局变成:

Two By Two

咱们先不思考这个效果怎么实现,先来了解实现这个效果的相关知识,也就是我们今天要介绍的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(:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css3/quantity-ordering-with-css.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部