CSS3选择器nth-child(n)
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)的更多相关文章
- 总结30个CSS3选择器
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 ;; ...
- 总结30个CSS3选择器(转载)
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- CSS3选择器的研究,案例
在上一篇CSS3选择器的研究中列出了几乎所有的CSS3选择器,和伪类选择器,当是并没有做案例的研究,本想在那篇文章里面写,但想想如果把案例都写在那篇文章里面,对于查找来说就不是很方便,所有另开一篇来讲 ...
- css3 选择器(二)
接css3选择器(一) 八.结构性伪类选择器[:nth-child(n)] :nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素,和jquery中一样. 其中"n&qu ...
- CSS3 选择器——伪类选择器
前面花了两节内容分别在<CSS3选择器——基本选择器>和<CSS3选择器——属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择 ...
- CSS3选择器(三)之伪类选择器
伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总 结一下CSS中常用的伪类选择器的使用方法,最后把重心放 ...
- CSS3选择器(一)之基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器.那么从现在开始我们先丢开他们版本的区别, ...
- 前端必须掌握30个CSS3选择器
也许你已经学会了CSS的三个简单常用的选择器:#ID,.class,标签选择器,可是这些就足够了吗?随着CSS3的到来,作为前端开发者需要掌握下面三十个基本的选择器,这样才可以在平时开发中得心用手. ...
- css3: css3选择器
--------------------css3选择器-------------------------css3属性选择器 ~~属性选择器基本上ie7+都支持,可以相对放心的使用 见: www.ca ...
随机推荐
- Python3中Super函数的使用
Super函数用法 主要用于调用父类函数 代码演示 class A: def __init__(self): self.n = 2 print('此时执行A的自定义函数,self的n值为',self. ...
- 设置点击事件时Unable to preventDefault inside passive event listener due to target being treated as passive
问题 当使用fastClick.js设置点击事件时,控制台报错: [Intervention] Unable to preventDefault inside passive event listen ...
- C++中链表报错member access within null pointer of type 'ListNode'
报错原因:指针有指向空节点的可能,所以报错,C++中链表的使用比较严格 解决方法:在给指针确定指向节点之前,先判断此节点是否为空节点
- 2021.09 ccf csp 第四题 收集卡牌
2021.09 ccf csp 第四题 收集卡牌 思路 这题如果直接计算,因为不同的分类种数太多,枚举所有的分类情况是一个几乎不可能的复杂任务. 但不同摸牌次数,不同已摸出牌种类的子问题的答案之间,具 ...
- 前端常见的Vue面试题目汇总
请说一下响应式数据的原理 默认Vue在初始化数据时,会给data中的属性使用Object.defineProperty重新定义所有属性,当页面到对应属性时,会进行依赖收集(收集当前组件中的watche ...
- 分析网络工具 Wireshark与tcpdump
一.安装使用 1. 安装 2. 选择网卡:我们的主机就是通过其中一块网卡和其他主机进行数据交互: 3. 点击开始:打开wireshark,点击左上角那个蓝色的鲨鱼鳍按钮,开始捕获新的分组并清空之前的分 ...
- 091_解析Callout XML 处理方式
XML: <?xml version="1.0" encoding="iso-8859-1" ?> <results> <resu ...
- java 复习篇1-----人机交互
CMD命令 盘符名称+冒号 说明:盘符切换 举例:e:回车,表示切换到e盘 dir: 说明:查看当前路径下的内容 cd目录: 说明:进入单级目录 举例:cd itheima cd. . 说明:回退到上 ...
- gcc_to_use
gcc 目录 gcc 概要 基本指令及功能(以gcc为例) gcc -gdb gcc -cmake 概要 GCC:GNU Compiler Collection(GUN 编译器集合),是GNU项目中符 ...
- 架构的生态系 资讯环境被如何设计至今.PDF
书本详情 架构的生态系 资讯环境被如何设计至今 作者: 濱野智史出版社: 大鴻藝術股份有限公司副标题: 資訊環境被如何設計至今?原作名: アーキテクチャの生態系――情報環境はいかに設計されてきたか译者 ...