css優先權的設定

在網頁製作中，我們常常需要使用CSS來控制樣式。在CSS中，有很多方式來定義樣式，而不同的方式可能同時對同一個元素進行了樣式定義，此時就會涉及到CSS的優先權問題。一個元素可能會有多個CSS樣式定義，而如何決定哪一個樣式才是最終生效的，就需要了解CSS的優先權設定。

CSS的選擇器優先權

CSS選擇器就是用來決定哪些元素要套用哪些樣式的規則。在CSS中，選擇器的優先權是透過權重來決定的。每個選擇器都有一個權重值，權重值越大，就越優先生效。

CSS選擇器權重值的計算方法是：

• 對於每個選擇器，根據選擇器的類型和對應的限定條件分配一個基本值，如：元素選擇器為1，類別選擇器為10，ID選擇器為100，內嵌樣式為1000；
• 對於一個選擇器序列（由逗號分隔的多個選擇器），將各選擇器的基本值相加得到一個總和；
• 對於每個元素，將其匹配的選擇器序列中權重值最大的一個選擇器的基本值作為其優先值；

舉例說明：

<style>
    #idSelector {
        color: blue;
    }
    .classSelector {
        color: green;
    }
    div {
        color: red;
    }
</style>
<div id="idSelector" class="classSelector">Hello World!</div>

在這個例子中，Hello World!這個元素滿足了ID選擇器#idSelector和類別選擇器.classSelector，以及元素選擇器div，那麼CSS會依照下列規則來決定最終使用的樣式：

• ID選擇器的權重值為100，那麼#idSelector的基本值就是100;
• 類別選擇器的權重值為10，那麼.classSelector的基本值就是10;
• 元素選擇器的權重值為1，那麼div的基本值就是1；
• 然後根據權重值相加的規則，#idSelector的總權重值是100，.classSelector的總權重值是10，div的總權重值是1;
• 最後，根據優先權值最大的選擇器規則，元素<div>的樣式將會套用ID選擇器<code>#idSelector中的樣式，也就是字型顏色會變成藍色。

  CSS屬性重要性

  有時候，我們可能想要讓某些樣式規則無條件地覆寫其他樣式規則。這時，我們需要用到CSS的!important屬性。在CSS中，!important可以強制指定某個樣式規則優先生效。

  舉例說明：

  <style>
      p {
          color: blue !important;
      }
      .classSelector {
          color: green;
      }
  </style>
  <div class="classSelector">
      <p>Hello World!</p>
  </div>

  在這個例子中，P元素應用了顏色屬性，並強制設定為!important。如果沒有!important標記，其實P元素應用的是.classSelector中的顏色屬性（預設為綠色），但由於加了!important，P元素的顏色將強制設為藍色。

  !important標記並不是萬能的，它也不能重寫內聯樣式。當內聯樣式存在時，即使設定了一個選擇器!important，也會被內聯樣式覆蓋。

  CSS內嵌樣式優先權

  在HTML中，內嵌樣式是直接定義在HTML標籤元素中的樣式。由於內聯樣式作用於單一元素，所以內聯樣式的優先權總是最高的。

  舉例說明：

  <div style="color: red">Hello world!</div>

  在這個例子中，div元素使用了內聯樣式，顏色為紅色。即使新增了其他CSS樣式規則，也不會影響到內嵌樣式。在這個例子中，div元素的顏色一定是紅色。

  CSS繼承規則

  CSS的繼承規則規定，某些樣式屬性可以從父元素繼承下來。當一個元素沒有指定某些CSS屬性值時，它們會從父元素繼承下來。例如，可能常用到的font-family和font-size這兩個CSS屬性，它們的值可以從父元素繼承。

  舉例說明：

  <style>
      div {
          color: red;
      }
      .classSelector {
          font-size: 18px;
          font-family: Arial;
      }
  </style>
  <div class="classSelector">Hello world!</div>

  在這個例子中，div元素設定了顏色為紅色，沒有設定字體屬性。子元素使用了.classSelector的字體屬性，因此字體將繼承自.classSelector，即字體大小為18像素，字體為Arial。顏色將繼承自父級元素div，即紅色。

  總結：

  CSS的優先權規則雖然有些煩瑣，但是我們掌握了它，就能更好地控制樣式。在設定優先權的時候，我們可以透過更改選擇器的權重和樣式的!important屬性來滿足我們對某些樣式屬性優先權的需求。同時，我們也要注意到內聯樣式的優先權最高，會覆蓋其他所有樣式規則。 CSS的繼承規則也可以讓我們在確保樣式規則一致性的同時，減少程式碼量，更好地維護網頁程式碼。