跳至內容

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.