CSS Diner｜CSS 選擇器練習遊戲

CSS Diner

你即將開始學習 CSS 選擇器！選擇器可以用來挑選要套用樣式的元素。

p {
   margin-bottom: 12px;
}

這裡的「p」就是選擇器（會選取所有 <p> 元素），並套用 margin-bottom 樣式。

開始遊戲吧！在下方編輯器輸入 CSS 選擇器，選取桌上正確的項目。答對後就會進入下一關。

將滑鼠移到桌上的項目上，可查看其 HTML 標記。

右側有選擇器提示可以參考！ →

style.css

CSS 編輯器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

執行

{
/* 樣式會寫在這裡。 */
}

/*
輸入數字可直接跳至指定關卡。
例如 → 輸入「5」前往第 5 關
*/

table.html

HTML 檢視器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

選擇關卡