超詳細！CSS 強度順序邏輯關係(上)

MiaHsu

7 min readDec 30, 2019

有時候我們常常會遇到 CSS 覆寫不過去然後專案或修改迫在眉睫，不管三七二十一就給它 !important 下去，造成 CSS 越來越沒有邏輯性，歷史共業就是這樣造成的….

因此了解如何適時的增強 CSS 的強度，在專案的維護上是相當重要的，將分成上中下 3 篇，漸進式的瞭解 CSS 強度順序邏輯關係

本節重點： CSS 選擇器強度說明及使用時所需注意重點。

簡單用資訊圖表說明一下網頁的構成

瞭解網頁的基本架構後，接著就針對 CSS 進行說明：

CSS 語法結構

整個架構我們稱為 規則集（rule set），或是簡稱規則（rule）也可以。※也注意名字裡面的單獨部分）

選擇器（Selector）
在這個規則的最前頭為 HTML 的元素名。它將決定你 HTML 裡什麼元素將被你接下來的設定影響（ex:,就是段落元素 p）。
宣告（Declaration）
單一個規則，例如 color: red; 指定了這個元素的呈現樣貌。
屬性（Properties）
修改屬性是改變你HTML元素的一種方法 . (ex: color 是段落 p 元素的一種屬性.) 在CSS中, 你可以選擇哪些屬性用來影響 rule。
屬性值（Property value）
屬性值就是位於屬性右邊，在冒號（:）之後，從眾多的可能樣式選出一個給予屬性（ex:color 樣式中選出 red）。

選擇器的種類

在撰寫 CSS 必須注意撰寫「強度問題」及「前後順序」，瞭解這兩大重點就可以避免掉大部分覆寫不上的窘境，以下我們先來理解選擇器的種類及強度排名吧！

第一種：Type 選擇器（HTML 的任一標籤）：p/ span/ div…..。

特點：擁有默認的 CSS 語法，像是 p 帶有下面的語法。
影響：造成標籤呈現方式不同，然而每個瀏覽器對於默認的樣式語法也不盡相同。
因此：我們會常看到許多國外的模版，會引用一個 reset 的 css 檔案，目的是為了統一各種瀏覽器不同的默認樣式，這邊提供 reset css 語法下載/ HTML5Doctor/ Yahoo!(YUI 3)Reset Css。※記得最後還是必須用瀏覽器實測結果哦！

舉例說明： div/ p/ span/ section

<div style=”border:red solid 1px”>我是DIV</div>
<div style=”border:red solid 1px”>我是DIV</div>
<p style=”border:yellow solid 1px”>我是P</p>
<p style=”border:yellow solid 1px”>我是P</p>
<span style=”border:blue solid 1px”>我是SPAN</span>
<span style=”border:blue solid 1px”>我是SPAN</span>
<section style=”border:green solid 1px”>我是SECTION</section>
<section style=”border:green solid 1px”>我是SECTION</section>

顯示結果

可以看出以下幾點不同：
1.div/ p/ section 會換行(display:block)，span 不會換行(display:inline)。
2.接著比較 margin 的差異，基本上 div / span/ section是一樣的，p 則有默認的 margin 值。

那不同瀏覽器的結果又會是如何呢？

基本上 Firefox 和 Google Chrome 是最聽話的一家，只要是 W3C 規定的 Firefox 和 Google Chrome 都會乖乖照辦，然而 IE 瀏覽器常常跟 W3C 唱反調，更慘的是還有 IE8、IE9 、Edge 對於 CSS 的呈現都不太相同，我們用 p 來舉例說明。

可以看出以下幾點不同：
1.字體不同。
2.margin 不同。
3.與瀏覽器的間隔不同。

第二種： 以 . 開頭的 class 選擇器

特點：可以多重宣告。
影響：以利於作為覆寫 CSS 的選擇器。
因此：建議可以用多使用此選擇器。

舉例說明：多重宣告

<head> 
  <style>
    .textRed {color:red;}
    .textGreen {color:green;}
    .textBlue {color:blue;}
  </style>
</head>
<body>
  <p class=”textRed”>注意字的顏色</p>
</body>