✍ 📁 🙈 🙉 🙊
HTML
window Resize
html 測試 左入右出
!>
html 測試 上入下出
!>
html 測試 單入單出
!>
html 測試 左單右單
!>
顯示具有
CSS nth-child 偶奇數規則
標籤的文章。
顯示所有文章
顯示具有
CSS nth-child 偶奇數規則
標籤的文章。
顯示所有文章
偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)
偶數與奇數規則 CSS :nth-child(even) :nth-child(odd)
一種提高易於閱讀大型表格的方法是每,排以色調交替譬如,下面的 table 顯示淺灰色背景的 偶數排,以及白底的奇數排,這規則在此非常簡單。
table:nth-child(even) {background: #CCC}
table:nth-child(odd) {background: #FFF}
CSS table tr:first-child {background: red}
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
table tr:last-child {background: yellow}
00
CSS table.reference tr:nth-child(2n+2) {background-color: orange}
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
CSS table.reference tr:nth-child(3n+2) {background-color: orange}
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
CSS table.reference tr:first-child {background: red}
第一行為紅色
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
CSS table.reference tr:last-child {background: red}
最尾行為紅色
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
col:first-child {background: #FF0}
col:nth-child(2n+3) {background: #CCC}
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
table.reference tr:nth-child(-n+5){ background-color: orange }
table.reference tr:nth-child(n+8) { background-color: red }
Month
芒果
火龙果
燈
奇異果
芒果
哈密瓜
香蕉
Jan
14
13
14
13
14
11
11
Feb
13
15
12
15
15
12
14
Mar
16
15
14
17
16
15
14
Apr
17
16
17
17
17
15
15
May
21
20
20
21
22
20
21
Jun
24
23
25
24
25
23
25
Jul
29
28
26
26
27
26
25
Aug
29
28
27
28
28
27
26
Sep
24
23
23
26
24
24
24
Oct
20
22
20
22
20
19
20
Nov
18
17
16
17
16
15
14
Dec
15
13
13
14
13
10
13
Edit
較舊的文章
首頁
訂閱:
文章 (Atom)