:root 根目錄選取器 - 叫你阿爸出來講 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

第 11 屆 iThome 鐵人賽

DAY 29

Modern Web

金魚都能懂的 CSS 選取器 - 金魚都能懂了你還怕學不會嗎系列第 29 篇

:root 根目錄選取器 - 叫你阿爸出來講

11th鐵人賽 css教學網頁教學 css 金魚

CSScoke

2019-10-14 23:51:52

13830 瀏覽

分享至

本系列文章已集結成書，並於書中添加一些新篇章及細節補充，有興趣的朋友可至天瓏書局選購，感謝各位支持
購書連結 https://www.tenlong.com.tw/products/9789864344994?list_name=b-r30-zh_tw

讓我們好好善用CSS選取器吧

這個選取器應該是所有選取器裡面最特別的了，且目前這個選取器使用的地方還滿受限的，先來瞭解一下這個選取器的名字吧，root 顧名思義就是「根」的意思，網頁的「根」指的就是 <html>，表示是選取到根元素的意思，然後選到根元素能幹嘛? ...... 恩......目前也沒有要幹嘛。

:root 的好朋友 CSS variables

實際上目前 :root 沒看到有太多的應用，但是最多的應用多是搭配 CSS 變數 ( CSS variables ) 來應用，是的! 你沒聽錯，CSS 不是樣式嗎? 怎麼會有程式才有的變數呢? 你別誆我了，我可不是這麼好騙的!

其實 CSS 從 3 開始就出現了變數，但是因為瀏覽器支援度不高，導致大家也都不敢大力的推廣跟使用，而現在因為~~IE已死的關係~~瀏覽器支援度已大大的提升了，所以我們也比較能夠放心的使用，CSS 變數跟程式一樣都有分成全域變數跟區域變數，甚麼是全域變數跟區域變數呢? 白話一點就是公用的跟私人的啦，至於怎麼用呢，就讓我們繼續看下去。

CSS 變數的使用方式

CSS 變數的使用方式，我們可以把它分成兩個部分，一個是建立變數，一個是套用變數，所以我們就針對這兩個部份來了解

建立變數

建立變數的方式是使用兩個減號開始，然後在減號的右側接著輸入你要當作變數的名稱，再來就跟一般的 CSS 屬性寫法一樣了，就像下方這樣

--csscoke-red: #f00;

但是我們要放置到哪裡? 這就是我們要讓這個 CSS 變數要用在哪裡的問題了，如果我們希望在整個頁面中都可以使用這個變數的話，那我就把他寫在這篇的主角裡面，像是下方這樣

:root {
	--csscoke-red: #f00;
}

這樣在整個頁面中你到處想用上這個變數的話就能用上，那如果你只是希望在某個區域中使用的話呢? 那你就寫在該物件的選取器內，像是下方這樣

.section-item {
	--csscoke-title-red: #f00;
}

這樣的話你在別的選取器空間內就會無法使用這個選取器，但是該選取器目標的子層物件還是可以使用喔，例子晚點再來看看。

套用變數

CSS 變數的套用其實也非常簡單，我們只需要在屬性值的地方使用關鍵字 var( ) 並在括號內寫上你想套用的變數名稱，這樣就可以套用好囉。讓我們簡單的來看一下

/*建立全域變數*/
:root {
	--csscoke-red: #f00;
}

/*套用變數*/
.section-item {
	color: var( --csscoke-red );
}

上面原始碼中可以看到我們在 :root 中使用關鍵符號 --建立了一個 CSS 變數，並且給予該變數名稱叫做 csscoke-red ，然後給予這個變數名稱一個值 #f00，這表示後面要套用這個變數名稱的項目，會直接取得這個 #f00 。

接著又能看到我們在 .section-item 這個選取器中，設定了文字色彩 color，並且給予這個文字色彩套用了我們的變數--csscoke-red，這樣的一段語法在瀏覽器解析時瀏覽器會直接把結果變成像是下方這樣的語法結果

.section-item {
	color: #f00;
}

是不是非常方便呢! 未來我們要把整個系統的某個色彩改變的話，只要改一個變數的值就全部都改完了，是不是非常驚人的方便呢!

CSS 區域變數的特性

看完了跟 :root 搭配的全域變數用法，接著我們直接加碼補個區域變數吧，區域變數顧名思義就是只能用在某特定區域中，而所謂的區域也包刮了該區域的所有子層空間。不多說馬上來看原始碼

<div class="itemA">
    itemA
    <div class="itemA-sub1">
        itemA sub1
      <div class="itemA-sub2">
          itemA sub2
      </div>
    </div>
</div>

<div class="itemB">D</div>

上面這段原始碼中，第一個 itemA 內有兩個套嵌的子層，然後有一個同層的 itemB，接著 Amos 會在 itemA 建立一個區域變數，按照前面所說的規則，itemA-sub1 與 itemA-sub2 因為位於 itemA 區域中，所以應該是可以直接使用到 itemA 的變數，而 itemB 因為與 itemA 同層，所以他無法使用該變數。照樣的我們來看看 CSS 設定

.itemA{
  --amos: red;
}
.itemA-sub1{
  color: var(--amos);
}
.itemB{
  color: var(--amos);
}

你可以狠狠的點擊這邊來看看結果，是不是可以看到前面所描述的結果呢。

全域變數跟區域變數我該怎麼選擇

其實這問題要看一下你的變數要用在哪個範疇，通常我們是整個系統或是網頁都會統一共用的，像是色彩或是某些物件的尺寸或是框線，這一類的都很適合使用全域變數，相對的，如果你只是一部分會用到的話，像是某些模組組件，這樣你就很適合使用區域變數來設定他，非程式設計出身的你剛開始可能會稍微卡手，但隨著開發經驗越來越，相信你會越來越能夠體會 Amos 所說的應用情境的。

以上就是今天的金魚都能懂的 CSS 選取器 - :root 根目錄選取器 - 叫你阿爸出來講，如果文中描述有誤歡迎各位前輩不吝指正，各位金魚我們明天見～ (今天好像根本是來講變數的吼!!!)