CSS/Important

维基教科书,自由的教学读本
< CSS

概述[编辑]

important关键字使得CSS声明比普通声明有更高优先级。例如"p { color: red ! important }" 比 "p { color: green }"更优先.

重要声明的语法为:

property: value ! important

样式声明从最不重要到最重要顺序:

  1. 用户浏览器声明
  2. 用户普通声明
  3. 作者普通声明
  4. 作者重要声明
  5. 用户重要声明

例子[编辑]

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.