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

CSS3选择器nth-child(n)的更多相关文章

  1. 总结30个CSS3选择器

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...

  2. 总结30个CSS3选择器(转载)

    或许大家平时总是在用的选择器都是:#id  .class  以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...

  3. CSS3 选择器——基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  4. CSS3选择器的研究,案例

    在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...

  5. css3 选择器(二)

    接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...

  6. CSS3 选择器——伪类选择器

    前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...

  7. CSS3选择器(三)之伪类选择器

    伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...

  8. CSS3选择器(一)之基本选择器

    CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...

  9. 前端必须掌握30个CSS3选择器

    也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...

  10. css3: css3选择器

    --------------------css3选择器-------------------------css3属性选择器  ~~属性选择器基本上ie7+都支持,可以相对放心的使用 见: www.ca ...

随机推荐

  1. 使用iperf测试网卡性能

    1.目标 测试网卡通信性能,同时可以通过改变连接方式(从两台PC网线直连,切换到通过交换机连接)测试交换机最高速率性能. 2.使用工具 硬件:两台PC机(本例用win10 64位).数根网线.交换机 ...

  2. 数据类型之字符串(string)(一)

    1.引号括起的都是字符串(可以时空格),可以是''(单引号).""(双引号).''''''(三引号).""""""(我还 ...

  3. 用到的jar包作用随笔,吼吼

    名称 版本 说明 spring spring.jar(2.5) spring基础包                   公司基础包 isskill-pro0.7.1.2.jar(0.7.1.2) 包含 ...

  4. replace 常用积累

    1.替换有,或者.为: obj.keyword.replace(/,|./g,';') 2.替换元素标签类似于<em>文字</em>这种 let name=item.name. ...

  5. More exceptional c++读书笔记【附高清PDF下载】

    Part1我是在读完Scott Meyers的<Effective c++>之后才读到这本书的.能够讨论特定的主题而不是将一门语言作为一个整体来看待是我理解c++的首选方式,所以Sutte ...

  6. 2021年爆出log4j漏洞修复

    (1)用户可自查系统是否引用 Apache log4j-core 依赖,没有引用则不受漏洞影响. (2)排查系统中日志配置是否采用远程动态加载模式.(3)排查系统中是否正在使用JDBCAppender ...

  7. Telnet 连接smtp协议手动发邮件

    下面实验以QQ邮箱为例(比较多人用,其它邮箱也一样) Step1.打开CMD 输入:telnet SMTP服务器 SMTP端口地址   连接smtp服务器 Step2. 输入:helo 内容 (向它( ...

  8. HTML中添加点击链接 进行Skype对话的问题

    格式 :XXX 代表Skype账号: 开始 Skype 文字聊天 <a href="skype:XXX?chat">开始 Skype 文字聊天</a> 查看 ...

  9. Qt5.6使用Qt自带虚拟键盘

    Qt自带虚拟键盘是5.7版本以上才有,要在Qt5.6上使用自带虚拟键盘需要先下载源码,再进行编译安装.上网查了一些资料都很有用. https://doc.qt.io/qt-5/qtvirtualkey ...

  10. java SE02

    目录 五.面向对象 1. 封装 2. 多态 3. 继承 六.内部类 1. 局部内部类 2. 局部内部类 3. 静态内部类 4.匿名内部类 七.异常 1. 五个关键字 2. 自定义异常 五.面向对象 1 ...