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.