:nth-child

概述

:nth-child(an+b)?這個?CSS 偽類首先找到所有當前元素的兄弟元素，然后按照位置先后順序從1開始排序，選擇的結果為CSS偽類:nth-child括號中表達式（an+b）匹配到的元素集合（n=0，1，2，3...）。示例：

• 0n+3?或簡單的?3?匹配第三個元素。
• 1n+0?或簡單的?n?匹配每個元素。（兼容性提醒：在 Android 瀏覽器 4.3 以下的版本?n?和?1n?的匹配方式不一致。1n?和?1n+0?是一致的，可根據喜好任選其一來使用。）
• 2n+0?或簡單的?2n?匹配位置為 2、4、6、8...的元素（n=0時，2n+0=0，第0個元素不存在，因為是從1開始排序)。你可以使用關鍵字?even?來替換此表達式。
• 2n+1?匹配位置為 1、3、5、7...的元素。你可以使用關鍵字?odd?來替換此表達式。
• 3n+4?匹配位置為 4、7、10、13...的元素。

a?和?b?都必須為整數，并且元素的第一個子元素的下標為 1。換言之就是，該偽類匹配所有下標在集合 { an + b; n = 0, 1, 2, ...} 中的子元素。另外需要特別注意的是，an?必須寫在?b?的前面，不能寫成?b+an?的形式。

語法

:nth-child( <nth> [ of <complex-selector-list> ]? )

where
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#

where
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*

where
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]

where
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

where
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]? |
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'

where
<attr-matcher> = [ '~' | | | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

示例

選擇器示例

tr:nth-child(2n+1)

表示HTML表格中的奇數行。

tr:nth-child(odd)

表示HTML表格中的奇數行。

tr:nth-child(2n)

表示HTML表格中的偶數行。

tr:nth-child(even)

表示HTML表格中的偶數行。

span:nth-child(0n+1)

表示子元素中第一個且為span的元素，與?:first-child?選擇器作用相同。

span:nth-child(1)

表示父元素中子元素為第一的并且名字為span的標簽被選中

span:nth-child(-n+3)

匹配前三個子元素中的span元素。

Detailed example

HTML

<h3><code>span:nth-child(2n+1)</code>, WITHOUT an<code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 3, 5, and 7 are selected.</p> <div class="first"><span>Span 1!</span><span>Span 2</span><span>Span 3!</span><span>Span 4</span><span>Span 5!</span><span>Span 6</span><span>Span 7!</span> </div><br><h3><code>span:nth-child(2n+1)</code>, WITH an<code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 5, and 7 are selected.<br>3 is used in the counting because it is a child, but it isn'tselected because it isn't a <code>&lt;span&gt;</code>.</p> <div class="second"><span>Span!</span><span>Span</span><em>This is an `em`.</em><span>Span</span><span>Span!</span><span>Span</span><span>Span!</span><span>Span</span> </div><br><h3><code>span:nth-of-type(2n+1)</code>, WITH an<code>&lt;em&gt;</code> among the child elements.</h3> <p>Children 1, 4, 6, and 8 are selected.<br>3 isn't used in the counting or selected because it is an <code>&lt;em&gt;</code>,not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selectschildren of that type. The <code>&lt;em&gt;</code> is completely skippedover and ignored.</p> <div class="third"><span>Span!</span><span>Span</span><em>This is an `em`.</em><span>Span!</span><span>Span</span><span>Span!</span><span>Span</span><span>Span!</span> </div>

Copy to Clipboard

CSS

html {font-family: sans-serif; }span, div em {padding: 5px;border: 1px solid green;display: inline-block;margin-bottom: 3px; }.first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) {background-color: lime; }

總結

以上是生活随笔為你收集整理的:nth-child选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。