所谓区间选择器，顾名思义就是我不想取指定某一个元素，比如一个div下有10个p元素，我想取中间第3-7个给他们同时加上样式或者干嘛，这时候用css怎么写呢？依照惯例，能用css的我们不用js，下面通过实际demo展示下css3骚操作的强大。
示例代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 100%; height: 30px; line-height: 30px; text-align: center; font-size: 0; color: #333; margin: 100px auto } .box p { border: 1px solid #eee; display: inline-block; font-size: 14px; padding: 0 15px; margin-left: -1px } .box p:nth-of-type(n+3):nth-of-type(-n+7) { background: #1890ff; color: #fff; } </style> </head> <body> <div class="box"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> </div> </body> </html> |
效果图
类似功能jq选择器
1 2 3 | $( "ul li").slice(start,end) // 参数是下标(起始，结束) $("ul li:gt(3)") // 列出 index 大于 3 的元素 $("ul li:lt(3)") // 列出 index 小于 3 的元素 |
小结
据不完全统计，该骚操作方法截止当前时间全球不到500人掌握，很显然，今天你看到我这篇文章，是荣幸的你将可能成为第500或501人。
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(6)
打赏
标签：
区间选择器 上一篇：Vue3.0源码学习尝鲜-“别再更新了，实在是学不动了”
下一篇：使用nrm管理npm镜像安装、配置及管理node多版本使用教程
非常感谢，写的真的很好。