CSS/Important

概述

important關鍵字使得CSS聲明比普通聲明有更高優先級。例如"p { color: red ! important }" 比 "p { color: green }"更優先.

重要聲明的語法為：

property: value ! important

樣式聲明從最不重要到最重要順序：

用戶瀏覽器聲明
用戶普通聲明
作者普通聲明
作者重要聲明
用戶重要聲明

例子

HTML文檔:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
 <head>
  <title>'!important' CSS declarations</title>
  <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 <body>
  <p>Paragraph 1.</p>
  <p id="para2">Paragraph 2.</p>
  <p>Paragraph 3.</p>
 </body>
</html>

style.css:

p {
  background-color:#fff ;
  color:#000 ! important
}

#para2 {
  background-color:#fc9 ;
  color:#00f ;
  border:1px solid black
}

p {
  background-color:#9cf ;
  color:#f00
}

How will the three paragraphs be presented?

第一段落

對於第一段落：(

Paragraph 1.

)。第一和第三個選擇器(p選擇器)匹配它。所有可能的樣式:

Declaration		Selector	Weighting
				Specificity
Property	Value		Importance^*	`style` attribute	ID selector	Class selector	Element selector	Source order^**
background-color	#fff	p	author normal (rank 3)	0	0	0	1	1
color	#000	p	author important (rank 4)	0	0	0	1	2
background-color	#9cf	p	author normal (rank 3)	0	0	0	1	6
color	#00f	p	author normal (rank 3)	0	0	0	1	7

最終適用的規則為深色背景：

Declaration		Selector	Weighting
				Specificity
Property	Value		Importance	`style` attribute	ID selector	Class selector	Element selector	Source order
background-color	#fff	p	author normal (rank 3)	0	0	0	1	1
background-color	#9cf	p	author normal (rank 3)	0	0	0	1	6
color	#00f	p	author normal (rank 3)	0	0	0	1	7
color	#000	p	author important (rank 4)	0	0	0	1	2

第一段落顯示為：

Paragraph 1.

第二個段落

3個選擇器都可用於第二個段落(

Paragraph 2.

)。

所有候選的樣式：

Declaration		Selector	Weighting
				Specificity
Property	Value		Importance	`style` attribute	ID selector	Class selector	Element selector	Source order
background-color	#fff	p	author normal (rank 3)	0	0	0	1	1
color	#000	p	author important (rank 4)	0	0	0	1	2
background-color	#fc9	#para2	author normal (rank 3)	0	1	0	0	3
color	#00f	#para2	author normal (rank 3)	0	1	0	0	4
border	1px solid black	#para2	author normal (rank 3)	0	1	0	0	5
background-color	#9cf	p	author normal (rank 3)	0	0	0	1	6
color	#00f	p	author normal (rank 3)	0	0	0	1	7

最終適用結果：

Declaration		Selector	Weighting
				Specificity
Property	Value		Importance	`style` attribute	ID selector	Class selector	Element selector	Source order
background-color	#fff	p	author normal (rank 3)	0	0	0	1	1
background-color	#9cf	p	author normal (rank 3)	0	0	0	1	6
background-color	#fc9	#para2	author normal (rank 3)	0	1	0	0	3
border	1px solid black	#para2	author normal (rank 3)	0	1	0	0	5
color	#00f	#para2	author normal (rank 3)	0	1	0	0	4
color	#00f	p	author normal (rank 3)	0	0	0	1	7
color	#000	p	author important (rank 4)	0	0	0	1	2

第二個段落的最終繪製結果:

Paragraph 2.

第三個段落

第三個段落其實與第一個段落完全相同。繪製效果為：

Paragraph 3.

結果

Paragraph 1.

Paragraph 2.

Paragraph 3.

用戶樣式表的例子

user.css：

p {
  color:#ff0 ! important ;
  background-color:#808080 ;
  font-family:cursive
}

第一個段落的候選樣式：

Declaration		Selector	Weighting
				Specificity
Property	Value		Importance^*	`style` attribute	ID selector	Class selector	Element selector	Source order^**
color	#ff0	p	user important (rank 5)	0	0	0	1	1:1
background-color	#808080	p	user normal (rank 2)	0	0	0	1	1:2
font-family	cursive	p	user normal (rank 2)	0	0	0	1	1:3
background-color	#fff	p	author normal (rank 3)	0	0	0	1	2:1
color	#000	p	author important (rank 4)	0	0	0	1	2:2
background-color	#9cf	p	author normal (rank 3)	0	0	0	1	2:6
color	#00f	p	author normal (rank 3)	0	0	0	1	2:7

適用結果：

Declaration		Selector	Weighting
				Specificity
Property	Value		Importance^*	`style` attribute	ID selector	Class selector	Element selector	Source order^**
background-color	#808080	p	user normal (rank 2)	0	0	0	1	1:2
background-color	#fff	p	author normal (rank 3)	0	0	0	1	2:1
background-color	#9cf	p	author normal (rank 3)	0	0	0	1	2:6
color	#00f	p	author normal (rank 3)	0	0	0	1	2:7
color	#000	p	author important (rank 4)	0	0	0	1	2:2
color	#ff0	p	user important (rank 5)	0	0	0	1	1:1
font-family	cursive	p	user normal (rank 2)	0	0	0	1	1:3

最終繪製結果：

Paragraph 1.

Paragraph 2.

Paragraph 3.