码云 CSS3 :nth-child() 选择器
AI 概述
定义和用法浏览器支持实例 1实例 2
定义和用法
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
提示: 请参阅:nth-of-type()。该选择器匹配同类型中的第 n 个同级兄弟元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器...
目录
定义和用法
:nth-child(n) 选择器匹配父元素中的第 n 个子元素，元素类型没有限制。
n 可以是一个数字，一个关键字，或者一个公式。
提示: 请参阅:nth-of-type()。该选择器匹配同类型中的第 n 个同级兄弟元素。
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
| 选择器 |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
实例 1
奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是 1）。 在这里，我们为奇数和偶数 p 元素指定两个不同的背景颜色：
<style>
p:nth-child(odd) {
background:#ff0000;
}
p:nth-child(even) {
background:#0000ff;
}
</style>
<body>
<h1>这是标题</h1>
<p>第一个段落</p>
<p>第二个段落</p>
<p>第三个段落</p>
<p><b>注释:</b> Internet Explorer 不支持 :nth-child() 选择器。.</p>
</body>
效果如下：
实例 2
使用公式（an+ b）.描述：a 代表一个循环的大小，N 是一个计数器（从 0 开始），以及 b 是偏移量。 在这里，我们对所有索引是 3 的倍数的 p 元素指定了背景颜色：
<style>
p:nth-child(3n+0) {
background:#ff0000;
}
</style>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
<p><b>注释：</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
效果如下：
以上关于CSS3 :nth-child() 选择器的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。
微信
支付宝声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS3 :nth-child() 选择器
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS3 :nth-child() 选择器
