CSS 选择器
.class 选择器
#id 选择器
* 选择器
element 选择器
element.class 属性
element,element 选择器
element element 选择器
element>element 选择器
element+element 选择器
element1~element2 选择器
[attribute] 选择器
[attribute=value] 选择器
[attribute~=value] 选择器
[attribute|=value] 选择器
[attribute^=value] 选择器
[attribute$=value] 选择器
[attribute*=value] 选择器
:active 选择器
:after 选择器
:before 选择器
:checked 选择器
:default 选择器
:disabled 选择器
:empty 选择器
:enabled 选择器
:first-child 选择器
:first-letter 选择器
:first-line 选择器
:first-of-type 选择器
:focus 选择器
:fullscreen 选择器
:hover 选择器
:in-range 选择器
:indeterminate 选择器
:invalid 选择器
:lang 选择器
:last-child 选择器
:last-of-type 选择器
:link 选择器
:not 选择器
:nth-child() 选择器
:nth-last-child() 选择器
:nth-of-type() 选择器
:nth-last-of-type() 选择器
:only-of-type 选择器
:only-child 选择器
:optional 选择器
:out-of-range 选择器
::placeholder 选择器
:read-only 选择器
:read-write 选择器
:required 选择器
:root 选择器
::selection 选择器
:target 选择器
:valid 选择器
:visited 选择器
CSS 变量教程
CSS 动画
CSS 函数
:nth-child() 选择器 - CSS常用知识记录 - 光年文档管理系统(Light Year Doc)
网站首页
:nth-child() 选择器
### 定义和用法 `:nth-child(n)` 选择器匹配属于其父元素的第 `N` 个子元素，不论元素的类型。 `n` 可以是数字、关键词或公式。 提示：请参阅 `:nth-of-type()` 选择器，该选择器选取父元素的第 `N` 个指定类型的子元素。 ### 实例 规定属于其父元素的第二个子元素的每个 `p` 的背景色： ```css p:nth-child(2) { background: #33cabb; } ``` Odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 `1`）。 在这里，我们为奇数和偶数 `p` 元素指定两种不同的背景色： ```css p:nth-child(odd) { background: #33cabb; } p:nth-child(even) { background: #0000ff; } ``` 使用公式 `(an + b)`。描述：表示周期的长度，`n` 是计数器（从 `0` 开始），`b` 是偏移值。 在这里，我们指定了下标是 `3` 的倍数的所有 `p` 元素的背景色： ```css p:nth-child(3n+0) { background: #33cabb; } ``` ### 浏览器支持 表格中的数字注明了完全支持该属性的首个浏览器版本。 | 选择器 | Chrome | IE | Firefox | Safari | Opera | |--------|--------|-----|---------|--------|-------| | :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
上一篇：
:not 选择器
下一篇：
:nth-last-child() 选择器
