前端技术学习之选择器（六）
来源：互联网 发布：南通醋酸纤维 知乎 编辑：程序博客网 时间：2024/05/20 14:43
七，结构性伪类选择器：nth-child(n)
:nth-child(n)选择器用来匹配某个父元素的一个或多个特定的子元素。
代码例子：
<!DOCTYPE html>
<html>
<head>
<style>
/*p:nth-child(2n+0)
{
background:#ff0000;
}
p:nth-child(odd)
{
background:#ff0000;
}*/
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
</body>
</html>
运行效果：
备注：Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）。使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。
：nth-last-child(n)和:nth-child(n)相似，但是多了个last，这个last代表从后向前，其他地方没差别。
0 0
- 前端技术学习之选择器（六）
- 前端技术学习之选择器（一）
- 前端技术学习之选择器（二）
- 前端技术学习之选择器（三）
- 前端技术学习之选择器（四）
- 前端技术学习之选择器（五）
- 前端技术学习之选择器（七）
- 前端技术学习之选择器（八）
- 前端技术学习之选择器（九）
- 前端技术学习之选择器（十）
- 前端技术学习之选择器（十一）
- 前端技术学习之选择器（十二）
- 前端技术学习之选择器（十三）
- 前端学习（六）
- JQuery学习笔记6：选择器之六
- 前端基础学习之CSS选择器
- 前端学习笔记（六）
- NIO边看边记 之 selector选择器（六）
- 程序在内存中的分布
- TENSORFLOW官方文档-MNIST机器学习入门-训练模型
- liferay ga6主题工程研究随笔
- android 仿微信聊天界面，以及语音录制功能
- windows下搭建virtualenv、virtualenvwrapper虚拟环境
- 前端技术学习之选择器（六）
- GIC驱动代码分析
- css边框和背景设置
- java 集合类的小区别
- 递推——爬楼梯
- css3前缀、rem和浏览器css3支持版本
- AndroidMainfest.xml详解——<instrumentation/>
- css表格和样式
- 一篇文章让你看懂量化交易发展史
