CSS3的nth child選擇器的使用

:first-child

:first-of-type
:last-of-type
:only-of-type
:only-child
:nth-child(n)
:nth-last-child(n)
:nth-of-type(n)
:nth-last-of-type(n)
:last-child

nth-child研究開始●○

○○○○

○○○1

2345

6789

10

lang="zh">
charset="utf-8">
nth-childtitle>
head>
class="list">
這是列表第1行li>
這是列表第2行li>
這是列表第3行li>
這是列表第4行li>
這是列表第5行li>
這是列表第6行li>
這是列表第7行li>
這是列表第8行li>
這是列表第9行li>
這是列表第10行li>
ul>
body>
html>

ul

.list
ul.list
li

○○○○

○○12

3456

78910

ul

.list
li:nth-child(3)

/* 第乙個 */

ul.list
li:first-child
/* 最後乙個 */
ul.list
li:last-child

○○○○

○○○1

2345

6789

10

ul

.list
li:nth-child(-n+3)

●●●●

●●12

3456

78910

ul

.list
li:nth-child(n+4)

●●●●

○○12

3456

78910

ul

.list
li:nth-child(n+4)
:nth-child(-n+8)

●○●○

●○12

3456

78910

ul

.list
li:nth-child(2n+1)

ul

.list
li:nth-child(odd)

○●○●

○●12

3456

78910

ul

.list
li:nth-child(2n)

ul

.list
li:nth-child(even)

○●○○

●○12

3456

78910

ul

.list
li:nth-child(3n)

●○○●

○○12

3456

78910

ul

.list
li:nth-child(3n+2)

○○●○

○●12

3456

78910

ul

.list
li:nth-child(3n+1)

●○○○

○●12

3456

78910

ul

.list
li:nth-child(5n)

●○●○

○○12

3456

78910

ul

.list
li:nth-child(2n+1)
:nth-child(n+4)
:nth-child(-n+8)

●○●○

●○12

3456

78910

ul

.list
li:nth-child(2n+1)
:nth-child(n+3)
:nth-child(-n+9)

○○○○

○●12

3456

78910

ul

.list
li:nth-child(3n+1)
:nth-child(2n)

○○○○

○●●1

2345

6789

10

ul

.list
li:nth-last-child(-n+2)

●●○●

●○12

3456

78910

ul

.list
li:not(
:nth-child(3n+1))

●●●●

●○12

3456

78910

ul

.list
li:not(
:nth-last-child(1))

ul

.list
li:not(
:last-child)

lang="zh">
charset="utf-8">
documenttitle>
head>
class="dl">
第1個dtdt>
第1個dddd>
第2個dtdt>
第2個dddd>
第3個dtdt>
第3個dddd>
第4個dtdt>
第4個dddd>
第5個dtdt>
第5個dddd>
dl>
body>
html>

□○■●

□○■1dt

1dd2dt

2dd3dt

3dd4dt

4dd5dt

5dd

dl

.dldl
.dldt
dl.dl
dddl
.dldt
:nth-of-type(2n)
dl.dl
dd:nth-of-type(2n+1)

CSS3的nth child 選擇器

nth child 瀏覽器支援 ie9及以上版本，火狐，谷歌，safari opera都支援！nth child n 選擇器匹配屬於其父元素的第 n個子元素，不論元素的型別。p nth child 2 將匹配body的第二個元素 不要把 nth child 和 nth of type 混淆。css3...

css3 選擇器 nth child 選擇問題

nth child 是乙個偽類選擇器，它並不會按照標籤的順序進行選擇，而是按照順序進行選擇 例子 doctype html p nth child 8 先根據順序選擇第8行，在檢查它是否是p元素，如果是p就是紅色，父元素是body style head 這是標題 h1 1第乙個段落。p 2第二個段落...

CSS3偽類選擇器 nth child

css3偽類選擇器 nth child css3標準已提出數年，但是目前能實現她的瀏覽器並不多，雖然部分瀏覽器能實現部分規範，但這又有什麼用呢？面對更多的相容性問題，今天我們就來 前瞻 一下css3的乙個偽類選擇器 nth child css3的強大，讓人驚嘆，人們在驚喜之餘，又不得不為其艱難的道路...