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. Educational Codeforces Round 137 (Rated for Div. 2) - F. Intersection and Union

    (线段树 + 思维)or 动态dp [Problem - F - Codeforces](https://codeforces.com/contest/1743/problem/E) 题意 数轴上有 ...

  2. 有监督的图像翻译——Pix2Pix

    应用:图像到图像的翻译是GAN的一个重要方向,基于一个输入图像得到输出图像的过程,图像和图像的映射,如标签到图像的生成,图像边缘到图像的生成过程. 图像处理.图形和视觉中的许多问题涉及到将输入图像转换 ...

  3. c++获取类型信息

    获取类型信息 typeid typeid运算符用来获取一个表达式的类型信息. 对于基本类型数据, 类型信息比较简单, 主要指数据的类型; 对于对象(类类型的数据), 类型信息指: 对象所属的类, 所包 ...

  4. Unity 使整个UnityUI变成彩色的BUG

    最近接手了一个两年前的老项目,在这个项目里碰到一个BUG ,每次运行到这个场景的时候,整个Unity 的所有UI包括Unity界面都会变成彩色. 后来发现是因为物体丢失,代码修改Image里的图片颜色 ...

  5. P2016题解

    P2016题解 题目描述 Bob要建立一个古城堡,城堡中的路形成一棵无根树.他要在这棵树的结点上放置最少数目的士兵,使得这些士兵能瞭望到所有的路. 注意,某个士兵在一个结点上时,与该结点相连的所有边将 ...

  6. Datax-web的入门使用

    在学习入门之前,需要先启动Datax-web(Datax-web入门配置与启动) 1.登录 账户:admin 密码:123456 2.创建项目 3.新建执行器 项目中有默认的,可以直接使用 4.新建数 ...

  7. iOS 绘制虚线

    开发中经常用到虚线 创建一个imageView,直接调用下面的代码就可以了!,imageView的高一般设置2像素就可以了 - (void)drawLineByImageView:(UIImageVi ...

  8. word和excel转pdf

    1.下载jacob.jar包  网址:https://sourceforge.net/projects/jacob-project/files/jacob-project/ 2.导入到本地仓库:mvn ...

  9. Qt 中文编译错误和运行显示乱码

    Qt 中文编译错误 Qt error: C2001: 常量中有换行符 解决方法:菜单 --> 编辑 --> 选择编码(select Encoding)--> 文本编码 --> ...

  10. Linux 关闭系统时间同步-timedatectl的使用

    源于一次项目需要修改系统时间,但是每次修改后又被同步回网络时间,找了好久发现是这个原因: NTP即Network Time Protocol(网络时间协议),是一个互联网协议,用于同步计算机之间的系统 ...