css选择器高级用法之范围选择器

最近有个页面需要做一个圆形的进度条。
就这种:
css 选择器高级用法之范围选择器
在这里我用 css3 的范围选择器实现的。

主角:nth-child

定义和用法

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素,不论元素的类型。
n 可以是数字、关键词或公式。
一般都是这么用的:

:nth-child(n+6) 选中从第 6 个开始的子元素

范围高级用法

使用公式 (an + b)。描述:表示周期的长度,n 是计数器(从 0 开始),b 是偏移值。
当 a = 1 或 a = -1 时,1 可以从规则中省略。,直接(n+b)
前后限制范围 nth-child(n+4):nth-child(-n+8) 选中第 4-8 个子元素

我是提前创建好这一圈进度条,然后让它们opacity: 0;
然后用范围选择器让从 1-50 的元素opacity: 1;

废话不多说,直接上 demo

范围选择器之进度条
a'ゞ『完美』版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明css 选择器高级用法之范围选择器
喜欢 (12)
[]
分享 (0)
a'ゞ『完美』
关于作者:
一个前端小白菜
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址