有哪幾種指定 CSS 樣式的方式？權重又是什麼？能吃嗎？

網站的開發當中，若要設定 CSS，我們除了能夠針對網頁的標籤、class 進行指定，其實還有其它方式都能夠指定 CSS 樣式至我們希望呈現樣式的區塊，至於有那些呢，這篇文章就會來提到。

另外選用不同的方式，也會有不同的差異，這部分就會關心到 CSS 一種叫做「權重」的觀念，而它又牽涉到語法撰寫先後的問題，我們也會於後面來介紹。

指定 CSS 樣式的方式

* 星號，全域選擇器

此種指定方式權重為 0 分，實作方法如下：

1
2
3
4
5
/* CSS */
* {
    margin: 0;
    padding: 0;
}

星號代表的是整個 html 標籤，因此星號內的設定會套用到整個 HTML 標籤，如有要使用可放置於 CSS 前面位置，也看過有大神使用 * 來做 CSS Reset。

另外必須要特別提起的是，* 跟 body 標籤是不一樣的，雖然平常我們會利用 body 設計網站最基本或通用的樣式，但 body 的設定，套用範圍僅為該層以及子層（若設定具有繼承性的情況之下），但星號是整個 HTML 標籤的預設值都會被改變，所以請小心使用。

標籤選擇區

此種指定方式權重為 1 分，實作方式如下：

1
2
3
4
5
6
7
/* CSS */
h1 {
    color: blue;
}
a {
    color: pink;
}

此方式就是針對某一種標籤進行設定樣式動作，例如指定 h1 標籤（標題）顏色都是藍色、指定 a 標籤（鏈結）顏色都是粉紅色。

另外若針對標籤進行設定，我們得知標籤選擇器的權重為 1 分，比起星號的 0 分較高，因此前面 * 的設定會被覆蓋，例如我設定 h1 以及 a 標籤顏色後，原先的橘色設定都會被這兩個標籤的 CSS 設定覆蓋，但此時 p 標籤因為沒有進行任何設定，所以顏色就還是會維持星號的橘色哦！

不過這時就會遇到一個問題了，又不一定每個標籤的顏色永遠都一樣，像是文字色彩、文字大小、……，每個地方都很可能有不同的呈現，就不太能利用標籤選擇器來解決了。因此就會用到類別選擇器來解決這個問題。

類別選擇器

此種指定方式權重為 10 分，實作方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- CSS -->
<style>
    p {
        font-size: 16px;
    }
    .fz-2 {
        font-size: 20px;
    }
    .fz-3 {
        font-size: 24px;
    }
</style>
<!-- HTML -->
<p class="fz-2">lorem</p>
<p class="fz-3">lorem</p>

此時相信聰明的各位知道了權重的特性，權重分數愈大就會蓋住權重分數較小的部分，因此使用類別選擇器就能夠覆蓋住前面使用星號以及標籤選擇器設定的樣式。

使用此種方式需要再指定的標籤上加上 class="類別名" 的設定值，設定完後要到 CSS 設定針對此類別名稱的 CSS 樣式。且若使用類別選擇器指定樣式，在 CSS 內要在類別名稱錢加上 . 來做為跟標籤選擇器的區別。

因此使用類別選擇器就能夠針對不同的情境顯示不同的樣式了，而在實務上基本上也以設定標籤選擇器以及類別選擇器指定樣式為最大宗，但其實還有其它種設定方式，就繼續看下去吧！

ID 選擇器

此種指定方式權重為 100 分，實作方式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- CSS -->
<style>
    #fz-3 {
        font-size: 24px;
    }
    p {
        font-size: 16px;
    }
    .fz-2 {
        font-size: 20px;
    }
</style>
<!-- HTML -->
<p class="fz-2">lorem</p>
<p class="fz-2" id="fz-3">lorem</p>

指定方式的部分如同 class 那樣，在 HTML 增加一個 id 屬性，而在 CSS 設定樣式部分則是在 ID 前面加上 # 井字號，以此跟標籤選擇器還有類別選擇器作區別。使用 ID 選擇器後，雖然此範例第二個 p 段落同時有標籤、類別以及 ID 三種選擇器的設定，但因為 ID 選擇器的權重有 100 分，因此字體大小仍然為 24px。

基本上實務上不太會利用 ID 選擇器來指定樣式，除了分數過高難以讓後續覆蓋之外，而且一個網頁只能有同一個 ID 選擇器（class 可多個、ID 僅能一個），其實也不難理解為何只能有一個 ID，畢竟 ID 也可以類比成這段語句在網頁上的一種唯一識別（像是身份證字號或是地址）。

因此什麼時候會使用到 ID 呢？就是錨點，例如我們可以點擊鏈結，到網頁指定的區域。像我們就可以設定一個鏈結到達 id 設定為 fz-3 的區域。因為今天的主題是權重，所以這部分改天可以再寫一篇。

inline style

此種指定方式權重為 1000 分，實作方式如下：

1
2
3
<p style="font-size: 72px;">
    lorem
</p>

此種指定方式是直接在 HTML 標籤內下 CSS 語法，就能讓位於此段落區塊下面的內容設定成字體大小 72px。利用此種設定方式，因為權重比起前面所介紹的選擇器都還高分，所以就會呈現這裡的設定。

基本上也不太會使用此種方式設定樣式，會去設定的情況是為了要跟後端連接，比如像是募資網站會見到的進度條，就會將目前募資進度數值傳到 style，再由這裡呈現目前的進度。

大魔王來襲！!important

此種指定方式權重為 10000 分，實作方式如下：

1
2
3
h1 {
    color: red !important;
}

之所以叫他大魔王就是沒人比它高分了，指定為 !important 之後基本上可以無視其他選擇器的 color 設定了，因為都會以這裡的設置為主，所以基本上平常不太可能使用此設定值，不然後面怎麼改都改不動 XD

覆蓋樣式設定：先看權重，在看先後

我們先來整理一下前面所提到的選擇器以及權重分數：

  • * 星號：0 分（看情況使用）
  • 標籤選擇器：1 分
  • 類別選擇器：10 分
  • ID 選擇器：100 分（不建議設定樣式用）
  • inline style：1000 分（不建議設定樣式用）
  • !important：10000 分（不建議設定樣式用）

之所以會建議平常使用標籤選擇器與類別選擇器，是因為後續在覆蓋上會比較好覆蓋。但為何要覆蓋呢？可能會有幾種情境：

  • 網站預設文字為 16px，因此設定 body 為16px，但我希望有些字體能夠比較大
  • RWD 中，我希望電腦呈現的某區塊，在手機的又設定一個比較小的大小

這時候就會出現覆蓋的情形了。但是會怎麼覆蓋呢？基本上前面我們已經知道了權重的概念，但如果遇到了兩個同樣的屬性設定、但權重一樣的情形該會呈現哪一種設定值呢？這時候就會以樣式設定的先後順序來決定，此時比較後面設定的樣式就會覆蓋前面設定的。直接來段範例吧！

情境一：標籤在前、類別選擇器在後

1
2
3
4
5
6
7
8
9
<style>
    a {
        color: pink;
    }
    .a {
        color: red;
    }
</style>
<a class="a" href="#">鏈結</a>

答案我想很清楚就會是紅色的，因為類別選擇器權重較大。

情境二：類別選擇器在前、標籤選擇器在後

1
2
3
4
5
6
7
8
9
<style>
    .a {
        color: red;
    }
    a {
        color: pink;
    }
</style>
<a class="a" href="#">鏈結</a>

此情境答案一樣是紅色，雖然 a 標籤的設定在後，但因為先看權重才會看先後，所以還是類別選擇器贏喔！

情境三：兩個類別選擇器

1
2
3
4
5
6
7
8
9
10
<style>
    .a {
        color: red;
    }
    .b {
        color: pink;
    }
</style>
</style>
<a class="a b" href="#">鏈結</a>

此情境答案就會變成是粉紅色了。因為兩種權重都是 10 分，所以後面會蓋掉前面。

情境四：CSS 順序跟 HTML 類別擺放順序不一樣

1
2
3
4
5
6
7
8
9
10
<style>
    .a {
        color: red;
    }
    .b {
        color: pink;
    }
</style>
</style>
<a class="b a" href="#">鏈結</a>

大家可以注意到 a 標籤內的類別擺放順序不一樣了，但是答案一樣是粉紅色喔！因為權重只看 CSS 樣式設定，不看你 HTML 類別的設定順序 XD

情境五：來個變化題吧！

1
2
3
4
5
6
7
8
9
10
<style>
    a {
        color: red;
    }
    b {
        color: pink;
    }
</style>
</style>
<a class="a b" href="#">鏈結</a>

此題答案不知道大家有沒有想對呢？答案會是紅色，因為可以看到 CSS 設定的是針對 a 標籤跟 b 標籤，而不是類別選擇器哦！所以答案會是針對 a 標籤設定的紅色。

情境六：選擇器權重還能夠相加

1
2
3
4
5
6
7
8
9
10
11
12
13
<style>
    .wrap p {
        color: orange;
    }
    .text {
        color: blue;
    }
</style>
<div class="wrap">
    <p class="text">
        lorem
    </p>
</div>

這題你的答案是什麼呢？這題的答案會是橘色哦！計算如下：

  • .wrap 為 10 分 + p 段落 1 分 = 11 分
  • .text 為 10 分

所以 11 分大於 10 分的情況下，就會是橘色獲勝啦！所以選擇器的權重是能夠相加的 XD 想不到吧！

使用逗點指定樣式給多個選擇器

另外最後還需要介紹的是使用逗點來指定樣式給多個選擇器，因為有些樣式可能多個選擇器都會套用到，就會使用逗點來去做指定。至於常使用嗎？CSS Reset 會利用到這個技巧，至於平常是否會使用，其實我也不知道 XD 反正知道有這個技巧，就記錄下來。

1
2
3
ul, ol {
    list-style: none;
}

此語法能夠同時清除 ul 以及 ol 前面的項目符號以及編號，就不用分開設定了！另外需要注意的是他們的權重都是 1 分唷，不會因為同時設定而增加成 2 分。

後記

這篇我沒有附上截圖，開放讓大家自己動手做做看、親自體驗，相信會有更多收穫！（迷之聲：其實是懶癌發作 XDDDDDD）另外撰寫這篇文章也讓我對於星號的使用有了進一步的認識與了解，相關資料我也放在下方，大家也可以點開看看哦！

參考資料