css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type
https://blog.csdn.net/erdouzhang/article/details/70842177
最近系统项目，遇到较多表格 和 div 需要根据 写样式的
1.first-child（IE7兼容）、last-child（IE8不兼容）
html：
<body>
<h2>列表</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
</ul>
</body>
css：
<style>
ul {list-style: none;}
li:first-child {/*给第一个列表项目设置样式 兼容IE7*/
background-color: pink;
}
li:last-child { /*给最后一个列表项目设置样式 IE8不兼容*/
background-color: red;
}
</style>
解析：
一个页面中无论有几个ul列表，只要设置first-child、last-child，那么所有ul列表项的第一个和最后一个列表项目都会有设置的样式。
2.nth-child、nth-last-child （IE8不兼容）
html：
<body>
<h2>列表</h2>
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
</body>
css：
<style>
ul {list-style: none;}
li:nth-child(3) { /*表示li元素中，第三个元素 IE8不兼容*/
background-color: pink;
}
li:nth-last-child(2) { /*表示li元素中，倒数第二个元素 IE8不兼容*/
background-color: red;
}
</style>
3.对奇数、偶数使用样式
html:
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
</ul>
css：
<style>
ul {list-style: none;}
li:nth-child(odd) {/*表示li元素中，从1开始 奇数为pink*/
background-color: pink;
}
li:nth-child(even) {/*表示li元素中，从1开始 偶数为灰色*/
background-color: #ccc;
}
</style>
解析： li:nth-child(odd)含义：li的父元素ul的儿子中，从1开始数，奇数儿子设置样式为xxx;
当父元素为列表时，因为只有列表项目一种子元素，不会出现问题；当父元素是div时，就不止一种子元素，会引起问题。如下：
例如：设置div元素中为奇数标题h2背景颜色
html:
<div>
<h2>文章标题A</h2>
<p>我是一个小段落。。。</p>
<h2>文章标题B</h2>
<p>我是一个小段落。。。</p>
<h2>文章标题C</h2>
<p>我是一个小段落。。。</p>
<h2>文章标题D</h2>
<p>我是一个小段落。。。</p>
</div>
css:
h2:nth-child(odd) {
background-color: pink;
}
执行结果为：
解析： h2:nth-child(odd)含义是：h2的父元素div 的所有儿子中 为奇数的儿子 设置背景颜色；而不是所有h2中为偶数的h2设置样式；
解决方法： nth-of-type可以避免则会中问题产生
4.nth-of-type（IE8不兼容）：只针对同类型的元素进行计算
css:
h2:nth-of-type(odd) { /*所有h2标签中为奇数的设置样式*/
background-color: pink;
}
h2:nth-of-type(even) { /*所有h2标签中为偶数的设置样式*/
background-color: #ccc;
}
解析： h2:nth-of-type(odd)含义：在所有h2标签中，只要是奇数h2就设置样式；只针对h2标签，与父元素无关；
5、循环使用样式 li:nth-child(4n+1)
html：
<ul>
<li>列表项目1</li>
<li>列表项目2</li>
<li>列表项目3</li>
<li>列表项目4</li>
<li>列表项目5</li>
<li>列表项目6</li>
<li>列表项目7</li>
<li>列表项目8</li>
<li>列表项目9</li>
<li>列表项目10</li>
<li>列表项目11</li>
<li>列表项目12</li>
</ul>
css：
<style>
ul {list-style: none;}
li:nth-child(4n+1) { /*表示li元素中，4个li为一组循环 第一个li设置为*/
background-color: red;
}
li:nth-child(4n+2) { /*表示li元素中，4个li为一组循环 第二个li设置为*/
background-color: pink;
}
li:nth-child(4n+3) {
background-color: #ccc;
}
li:nth-child(4n+4) {
background-color: yellow;
}
</style>
解析：
4n含义：四个li元素为一组循环；
4n+1含义：这一组循环中，第一个样式；
4n+2含义：这一组循环中，第二个样式；
4n+3含义：这一组循环中，第三个样式；
4n+4含义：这一组循环中，第四个样式；
css3 - 选择器first-child、last-child、nth-child、nth-last-child、nth-of-type相关推荐
- html选择器有哪些child,css3选择器child有哪些？css3选择器child用法详解
本篇文章给大家带来的内容是关于css3选择器child有哪些?css3选择器child用法详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 对于CSS3的结构伪类选择器,为了更好地 ...
- html相同标签nth,比较CSS3选择器:nth-child和:nth-of-type之间的区别
本篇文章主要介绍了CSS3选择器:nth-child和:nth-of-type之间的差异,非常具有实用价值,需要的朋友可以参考下 先看一个简单的实例,首先是HTML部分: 我是第1个p标签 我是第2个 ...
- 总结30个CSS3选择器（转载）
或许大家平时总是在用的选择器都是:#id .class 以及标签选择器.可是这些还远远不够,为了在开发中更加得心应手,本文总结了30个CSS3选择器,希望对大家有所帮助. 1 *:通用选择器 * ...
- 前端必须掌握30个CSS3选择器
本文中将综合前端开发中常用的30个CSS3选择器,并且附带了浏览器的支持情况,希望对大家有所帮助. 1.*:通用元素选择器 * { margin:0; padding:0; } *选择器是选择页面上的 ...
- CSS3选择器介绍及用法总结
tip:有问题或者需要大厂内推的+我脉脉哦:丛培森 ٩( 'ω' )و CSS3新增了很多强大的选择器 它可以让我们少写一些js事件脚本 我们先来看看各个版本的选择器有哪些 注: ele代表eleme ...
- CSS3选择器 :read-only选择器 CSS3选择器 :read-write选择器
CSS3选择器 :read-only选择器 ":read-only"伪类选择器用来指定处于只读状态元素的样式.简单点理解就是,元素中设置了"readonly='reado ...
- CSS3 选择器(转)
http://www.w3school.com.cn/cssref/css_selectors.asp css的选择器,做个记录,在爬虫选择元素里很多要用到. CSS3 选择器 在 CSS 中,选择器 ...
- CSS3 选择器——属性选择器
上一节在<CSS3选择器--基本选择器>中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分--属性选择器.属性选择器早在CSS2中就被引入了,其主要作用 ...
- css3常用方法以及css3选择器
最重要的 CSS3 模块包括: 选择器 框模型 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框 CSS3 边框 通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使 ...
- CSS3选择器:nth-child和:nth-of-type之间的差异的那些事儿
一.深呼吸,直接内容 :nth-child和:nth-of-type都是CSS3中的伪类选择器,其作用近似却又不完全一样,对于不熟悉的人对其可能不是很区分,本文就将介绍两者的不同,以便于大家正确灵活使 ...
最新文章
- 超干货！当初我要是这么学习操作系统就好了（附带思维导图）
- ae 创建图像等高线 蒙版_如何用AE创建简单的UI动效
- java有var吗_java – Var和Var之间的区别
- python 画风场 scipy_Python数据分析及可视化实例之Scipy
- python制作文本编辑器_Python小实战：制作文本编辑器
- php oracle 中文字段,怎么解决php oracle乱码问题
- 容器编排技术 -- Kubernetes是什么？
- 如何自动从Word表格中提取高亮（不同颜色）文本--Java实现
- Myeclipse+SSH+miniui，Action数据加载到miniui表格
- 深度学习 --- 受限玻尔兹曼机RBM（直接采样、接受-拒绝采样、重要性采样详解）
- oracle+imp部分数据,ORACLE数据库IMP逻辑导入出现ORA-00910的处理案例
- 国产达梦数据库的结合Enterprise Library的应用开发
- openssh服务以及基于ssh的双机互信配置
- 【BZOJ】【2730】【HNOI2012】矿场搭建
- 代码不规范，亲人两行泪
- IR2110不具备隔离驱动作用
- 计算机营销专业毕业生自我评价,市场营销专业毕业生自我评价
- 计算机主机箱的类型,电脑机箱尺寸分类
- JavaScript中开发常用方法-总结-持续更新
- jQuery基础：选择器、动画、DOM操作和事件等