CSS3选择器nth-child(n)
2024-09-08 19:01:26
CSS3选择器nth-child(n)实现隔几行选择元素
nth-child(n),n 可以是数字、关键词或公式。选择器匹配属于其父元素的第N个子元素,不论元素的类型。
序号写法:li:nth-child(3){background:orange;}/*把第3个LI的背景设为橙色*/
倍数写法:li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色*/
倍数分组匹配:li:nth-child(3n+1){background:orange;}/*匹配第1、第4、第7、…、每3个为一组的第1个LI*/
li:nth-child(3n+5){background:orange;}/*匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LI*/
li:nth-child(5n-1){background:orange;}/*匹配第5-1=4、第10-1=9、…、第5的倍数减1个LI*/
隔三行设置颜色$("tr:nth-child(3n)").css("background","#eee");
隔两行换一个颜色$("tr:nth-child(2n)").css("background","#eee");
或者你是要每隔三行的第二行和第三行设置颜色?$("tr:nth-child(3n)").css("background","#eee");
li:nth-child(3n+2)
每一行有3个(3n) 每一行选中第二个 (2), 就是3n + 2
最新文章
- 第一二九天上课 PHP 自制简单开发模板
- 读书笔记系列之java性能优化权威指南 一 第一章
- thikphp创建共享数据config.php
- JavaScipt 源码解析 异步
- Volley框架的使用
- [CSS]图片与文字对齐问题
- IOS图标尺寸一览
- 武汉科技大学ACM :1006: 零起点学算法25——求两点之间的距离
- Android播放音频的两种方式
- &;lt;源代码&;gt;FTPclient追加方式上传自己定义信息
- hive 学习笔记精简
- android一个弹出菜单的动画(二)
- android Intent.createChooser 应用选择
- Windows安全事件日志中的事件编号与描述
- Java Web Session设置
- 八年架构师大咖首次揭秘,年薪50W秘籍!
- javascript深入浅出图解作用域链和闭包
- viewstate?
- Practice4 阅读《构建之法》6-7章
- MySQL多实例部署与优化