:root 選擇器主要用來針對 HTML 文件的根元素（即 <html>），這與直接使用 html 元素選擇器有些許不同。兩者雖然選擇的都是同一個元素，但 :root 擁有比 html 更高的優先權，因此，:root 選擇器通常會用來定義全局變數，特別是在需要隨時調整樣式時非常方便。
💠:root 基本用法
語法
範例
1
2
3
4
5
6
7
8
9
| :root {
--primary-color: #3498db;
--text-color: #2d3436;
}
body {
color: var(--text-color);
background-color: var(--primary-color);
}
|
通過在 :root 中定義變數，可以將樣式統一管理，當需要調整時，只需要修改變數值，整個網站的相應樣式就會自動更新。
💠 實務應用一：統一管理顏色變數
一起試試：[CODEPEN]
在一個網站中，會有主色、次色或更多其他的顏色，在一開始時我們可以這樣寫
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <header>
<h1>Lala Code</h1>
</header>
<main>
<article>
<h2>如何提升前端技能</h2>
<p>隨著技術的快速發展，前端工程師需要不斷提升自己的技能。以下是幾個有效的學習方法：</p>
<ul>
<li>參加線上課程和工作坊</li>
<li>實踐專案，增強實務經驗</li>
<li>參與開源項目，與其他開發者合作</li>
</ul>
<p>持續學習是提升前端技能的關鍵，無論是技術知識還是實踐經驗，都需要投入時間和精力。</p>
</article>
</main>
<footer>
<p>版權所有 © 2024 Lala Code</p>
</footer>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
| body {
font-family: "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #ffffff;
}
header {
background-color: #ffeaa7;
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
color: #2d3436;
}
main {
padding: 20px;
}
article {
background-color: #f9f9f9;
color: #2d3436;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
footer {
background-color: #ffeaa7;
padding: 10px;
text-align: center;
color: #2d3436;
}
footer p {
margin: 0;
}
|
網頁中的顏色有很多重複使用的狀況，我們可以將所有顏色統一抽出來，放到 :root 中統一管理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
| :root {
--primary-color: #f9f9f9;
--secondary-color: #ffeaa7;
--text-color: #2d3436;
--background-color: #ffffff;
}
body {
font-family: "Helvetica Neue", Arial, sans-serif;
margin: 0;
padding: 0;
background-color: var(--background-color);
}
header {
background-color: var(--secondary-color);
padding: 20px;
text-align: center;
}
header h1 {
margin: 0;
color: var(--text-color);
}
main {
padding: 20px;
}
article {
background-color: var(--primary-color);
color: var(--text-color);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
footer {
background-color: var(--secondary-color);
padding: 10px;
text-align: center;
color: var(--text-color);
}
footer p {
margin: 0;
}
|
💠 實務應用二：支援 Light Mode 和 Dark Mode
一起試試：[CODEPEN]
隨著系統設置的暗色模式變得越來越普遍，我們可以通過 @media (prefers-color-scheme) 媒體查詢來實現自動的主題切換。這樣用戶的瀏覽器將根據系統設定自動選擇合適的樣式。
設定CSS主題媒體查詢
Light Mode (淺色模式)
1
| @media (prefers-color-scheme: light)
|
Dark Mode (暗色模式)
1
| @media (prefers-color-scheme: dark)
|
如果沒有明確設定 prefers-color-scheme 的 CSS 規則，那麼瀏覽器會默認使用 Light mode 的設計，也就是你在 :root 中定義的顏色。例如：
1
2
3
4
5
6
| :root {
--primary-color: #f9f9f9;
--secondary-color: #ffeaa7;
--text-color: #2d3436;
--background-color: #ffffff;
}
|
這樣的設定會被視為 Light mode 的預設值。
我們拿剛剛的範例來做調整，加上 Dark mode 會呈現的顏色
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| :root {
--primary-color: #f9f9f9;
--secondary-color: #ffeaa7;
--text-color: #2d3436;
--background-color: #ffffff;
}
@media (prefers-color-scheme: dark) {
:root {
--primary-color: #6d5a43;
--secondary-color: #774100;
--text-color: #e2dfd5;
--background-color: #333;
}
}
|
因為我們已經把所有顏色放在 :root 管理，其他地方的 CSS 就無需要再做任何改變
切換瀏覽器主題
在 Chrome 瀏覽器可以按 F12 開啟開發人員工具
點擊右上角的「三個點」圖標，選擇「More tools」→「Rendering」
找到「Emulate CSS prefers-color-scheme」選項，然後選擇「dark」來模擬暗色模式
最後就可以 Dark mode 的顏色囉！
💠 總結
:root 為我們提供了一種高效管理全局樣式的方法，特別是在使用變數進行顏色和字級等樣式的統一管理時，顯得非常方便。它的高優先級使得覆蓋性更強，尤其是在 Light 和 Dark Mode 的切換中，使用 :root 定義變數可以更輕鬆地應對不同模式下的樣式需求。
🚀實體工作坊分享
最近時賦學苑開了實體體驗課，即使你對程式碼沒有概念也能上手！Lala 會帶你一起做出一個個人品牌形象網站，帶你快速了解前端的開發流程，快跟我們一起玩轉 Web 吧！
🚀線上課程分享
線上課程可以加速學習的時間，省去了不少看文件的時間XD，以下是我推薦的一些課程
想學習更多關於前後端的線上課程，可以參考看看。
Hahow 有各式各樣類型的課程，而且是無限次數觀看，對學生或上班族而言，不用擔心被時間綁住
如果你是初學者，非常推薦六角學院哦！
剛開始轉職也是上了六角的課，非常的淺顯易懂，最重要的是，隨時還有線上的助教幫你解決問題！
Udemy 裡的課程非常的多，品質普遍不錯，且價格都滿實惠的，CP值很高！
也是很多工程師推薦的線上課程網站。
