關於CSS結構與層疊詳解

CSS 是 Cascading Style Sheets 的縮寫，暗示層疊（cascade）的概念是很重要的。在最基本的層面上，它表明CSS規則的順序很重要，但它比那更複雜。什麼選擇器在層疊中勝出取決於三個因素（這些都是按重量級順序排列的－前面的一種會否決後一種）：

• 重要性（Importance）

• 特殊性（Specificity）

• #原始碼順序（Source order）

重要性

• !important
  在CSS中，有一個特別的語法可以讓一條規則總是優先於其他規則：!important。把它加在屬性值的後面可以讓這條聲明有無比強大的力量。
• 注意: 重載這個 !important 宣告的唯一方法是在後面的源碼或是一個擁有更高特殊性的源碼中包含相同的 !important 特性的宣告。
  知道 !important存在是很有用的，這樣當你在別人的程式碼中遇到它時，你就知道它是什麼了。但是！我們建議你千萬不要使用它，除非你絕對必須使用它。您可能必須使用它的一種情況是，當您在CMS中工作時，您無法編輯核心的CSS模組，而且您確實想要重寫一種無法以其他方式覆蓋的樣式。 但是，如果你能避免的話，不要使用它。由於 !important 改變了層疊正常工作的方式，因此調試CSS問題，尤其是在大型樣式表中，會變得非常困難。
• 樣式表來源
  要注意一個CSS聲明的重要性取決於它被指定在什麼樣式表內－使用者可以設定自訂樣式表覆蓋開發者的樣式，例如用戶可能有視力障礙，想設定字體大小對所有網頁的存取是雙倍的正常大小，以便更容易閱讀。
• 相互衝突的聲明將按以下順序適用，

  後一種將覆蓋先前的聲明

  ：

• 在用戶代理樣式表的聲明(例如：瀏覽器在沒有其他聲明的預設樣式).

使用者樣式表中的普通聲明（由使用者設定的自訂樣式）。

作者樣式表中的普通宣告（這是我們設定的樣式，網頁開發人員）。

作者樣式表中的重要宣告

• 使用者樣式表中的重要宣告(優先順序最高)

• #Web開發者的樣式表覆蓋用戶的樣式表是合理的，所以設計可以保持預期，但是有時候用戶有很好的理由來重寫web開發人員樣式，如上所述，這可以通過在使用者的規則中使用

  !important。

  特殊性
• 特殊性基本上是衡量選擇器的具體程度的一種方法——

  它能匹配多少元素。如上面所示的範例所示，元素選擇器具有很低的特殊性。類別選擇器具有更高特殊性，所以將會戰勝元素選擇器。 ID選擇器有甚至更高的專用性, 所以將戰勝類別選擇器。 一個選擇器具有的專用性的量是用四種不同的值（或組件）來衡量的，它們可以被認為是千位，百位，十位和個位——在四個欄位中的四個簡單數字：

  千位元：如果宣告是在style 屬性中該欄位加1分（這樣的宣告沒有選擇器，所以它們的專用性總是1000。

• 百位元：在整個選擇器中每包含一個 ID選擇器就 在該列中加1分。

十位：在整個選擇器中每包含一個

類別選擇器

、

屬性選擇器

、或偽類別 就在該列加1分。 元素選擇器偽元素範例選擇器千位元一百位元0001#00

	個位元：在整個選擇器中每包含一個	或	就在該列中加1分。		注意: 通用選擇器 (*), 複合選擇器 (+, >, ~, ' ') 和否定偽類 (:not) 在專用性中無影響。
			##十位元	個位元	合計值
	#h1	0	0	0	1
	##important	0	1
	##0	0	0100		#h1 + p::first-letter
00	3	0003		#li > a[href*="zh-CN"] > .inline-warning	0

2######2#######0022########### ##important p > p > a:hover, 在一個元素的###