CSS中的数量查询
特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
@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(:
如需转载,烦请注明出处:https://www.w3cplus.com/css3/quantity-ordering-with-css.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!