CSS 復習與擴展(一) · 地表最強JS文檔

[toc] # 什么是 CSS? > **層疊樣式表, 用更少的代碼, 讓 HTML 更好看, 說完 o(_￣︶￣_)o** # 如何使用 CSS? ## 行內樣式 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> </head> <body> <div id="div1" style="width: 200px;height: 200px;background: red"></div> </body> </html> ``` ## 內部樣式 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> div { width: 300px; height: 300px; background: yellowgreen; } </style> </head> <body> <div id="div1"></div> </body> </html> ``` ## 外部樣式 ```css div { width: 400px; height: 400px; background: blue; } ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="div1"></div> </body> </html> ``` ## 優先級問題 > 行內樣式 > 內部樣式 > 外部樣式 # css 注釋 > 很像 js 的多行注釋 ## 什么是元素? > **元素（element）是文檔結構的基礎** 在 HTML 中，最常用的元素很容易識別，如`p`、`table`、`span`、`a`和`div`。文檔中的每個元素都對文檔的表現起一定作用。 ## 替換和非替換元素在 CSS 中，元素通常有兩種形式：`替換`和`非替換` ## 替換元素替換元素內容的部分并非由文檔內容直接表示。 `img` 元素，它由文檔本身之外的一個圖像文件來替換。 ```html <img src="howdy.gif" /> ``` 這個標記片段不包含任何具體內容，只有一個元素名和一個屬性。除非將其指向一個外部內容（在這里，就是由 src 屬性指定的一個圖像），否則這個元素沒有任何意義。 `input` 元素與之類似，取決于 `input` 元素的類型，要由一個單選鈕、復選框或文本輸入框替換。 ## 非替換元素大多數 HTML 和 HTML 元素都是非替換元素（nonreplaced element）。 ## 元素顯示角色除了替換和非替換元素，CSS2.1 還使用另外兩種基本元素類型：`塊級（block-level）`元素和`行內（inline-level）`元素。 ## 塊級元素特點 1. 總是在新行上開始； 2. 高度，行高以及外邊距和內邊距都可控制； 3. 寬度缺省是它的容器的 100%，除非設定一個寬度。 4. 它可以容納內聯元素和其他塊元素 ## 行內元素特點 1. 其他元素都在一行上； 1. 高，行高及外邊距和內邊距不可改變； 1. 寬度就是它的文字或圖片的寬度，不可改變 1. 內聯元素只能容納文本或者其他內聯元素 ## 常見塊級元素 - `blockquote` - 塊引用 - `center` - 居中對齊塊 - `div` - 常用塊級容器，也是 css layout 的主要標簽 - `form` - 交互表單 - `h1` - 大標題 - `h2` - 副標題 - `h3` - 3 級標題 - `h4` - 4 級標題 - `h5` - 5 級標題 - `h6` - 6 級標題 - `hr` - 水平分隔線 - `ol` - 排序表單 - `p` - 段落 - `table` - 表格 - `ul` - 非排序列表（無序列表） ## 常見行內樣式 - `a` - 鏈接 - `b` - 粗體(不推薦) - `big` - 大字體 - `br` - 換行 - `code` - 計算機代碼(在引用源碼的時候需要) - `em` - 強調 - `i` - 斜體 - `img` - 圖片 - `input` - 輸入框 - `label` - 表格標簽 - `select` - 項目選擇 - `small` - 小字體文本 - `span` - 常用內聯容器，定義文本內區塊 - `strike` - 中劃線 - `strong` - 粗體強調 - `sub` - 下標 - `sup` - 上標 - `textarea` - 多行文本輸入框 - `u` - 下劃線 ## CSS 語法 `CSS選擇器{屬性名:屬性值[;屬性名:屬性值...]}` `CSS選擇器{屬性名:屬性值;屬性名:屬性值}` `CSS選擇器{屬性名:屬性值1 屬性值2;屬性名:屬性值}` > _如果 CSS 語法寫錯了, 會怎樣?_ ## 元素選擇器(標簽選擇器) ```css div { width: 400px; height: 400px; background: blue; } ``` > _想給多個元素使用同一樣式, 怎么辦?_ ## 分組選擇器 ```css h2, p { color: gray; } ``` **最典型的應用:清除內外邊距** ```css /* 清除內外邊距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ fieldset, lengend, button, input, textarea, /* form elements 表單元素 */ th, td { /* table elements 表格元素 */ margin: 0; padding: 0; } ``` **對比一下, 高下立判** ```css h1 { color: purple; } h2 { color: purple; } h3 { color: purple; } h4 { color: purple; } h5 { color: purple; } h6 { color: purple; } /*********************************/ h1, h2, h3, h4, h5, h6 { color: purple; } ``` ## 通配符(可多可少, 可有可無) `*` 0 個, 1 個, 或者多個 `?` 0 個, 1 個通配選擇器（universal selector） > 顯示為一個星號（\*）。這個選擇器可以與任何元素匹配 ```css * { padding: 0; margin: 0; } ``` ## 一個標簽,一個屬性 ```css p { color: red; } ``` ## 一個標簽,多個屬性 ```css div { width: 200px; height: 200px; } ``` ## 多個標簽,一個屬性 ```css h1, h2, h3, h4, h5, h6 { color: purple; } ``` ## 多個標簽,多個屬性 ```css h1, h2, h3, h4, h5, h6 { color: purple; background: red; } ``` ## 建議多個屬性的話, 結尾都加分號`;` > 瀏覽器會忽略樣式表中的空白符 _注意, 一個有分號, 一個沒分號..._ ```css h1 { font: 38px Helvetica; color: yellow; background: black; } ``` ```css h1 { font: 38px Helvetica; color: yellow background: black; } ``` ## 什么是類選擇器和 ID 選擇器? > 通過類名或者 ID 名來定位元素 ## 類選擇器 > 要應用樣式而不考慮具體涉及的元素，最常用的方法就是使用類選擇器 ```css .div1 { width: 200px; height: 200px; } ``` ## 類和元素同時使用 ```css p.warning { font-weight: bold; } ``` ## 多類選擇器 > 如果類名有很多呢? ```css .warning { font-weight: bold; } .urgent { font-style: italic; } .warning.urgent { background: silver; } ``` > 類名有順序碼? ```css .warning { font-weight: bold; } .urgent { font-style: italic; } .urgent.warning { background: silver; } ``` > 如果元素沒有這么多類名呢? ```css .warning { font-weight: bold; } .urgent { font-style: italic; } .urgent.warning { background: silver; } .urgent.warning.help { background: red; } ``` ## 一個標簽多個類名 ```css p.warning.help { background: red; } ``` ## ID 選擇器 ```css #first-para { font-weight: bold; } ``` > ID 選擇器沒有組合使用的必要 ## 類選擇器還是 ID 選擇器？ > CSS 優先使用類, JS 優先使用 ID ## 類選擇器和 ID 選擇器區分大小寫嗎? > 區分, 因為 CSS 是大小寫敏感的 ## 屬性選擇器 > 對于類選擇器和 ID 選擇器，你所做的實際上只是選擇屬性值 ```css h1[id="hello"] { font: 38px Helvetica; color: yellow; background: black; } ``` ```css h1[class="hello"] { font: 38px Helvetica; color: yellow; background: black; } ``` ## 簡單屬性選擇 ```css h1[id] { font: 38px Helvetica; color: yellow; background: black; } ``` ```html <body> <h1 id="hello">hello world</h1> <h1 id="hello1">hello world</h1> <h1 id="hello2">hello world</h1> <h1 id="hello3">hello world</h1> <h1 id="hello4">hello world</h1> <h1 id="hello5">hello world</h1> </body> ``` > 有 class 屬性, 別管值是多少, 都會被選中 ## 多個屬性(且的關系) ```css p[id][class] { font-weight: bold; } ``` > _如果屬性沒值呢?..._ ## 根據具體屬性值選擇 ```css a[href="https:www.baidu.com"] { font-weight: bold; } ``` ## 根據多個屬性值(且的關系) ```css a[href="http://www.w3.org/"][title="W3C Home"] { font-size: 200%; } ``` > 如果是多個類名呢? 順序呢? ```css p[class="hello world"] { font-weight: bold; } ``` ## 根據部分屬性值選擇(`~=`) ```css h1[class~="hello"] { font: 38px Helvetica; color: yellow; background: black; } ``` ```html <body> <h1 class="hello world">hello world</h1> </body> ``` _其他標簽也有 hello 呢?_ ```css h1[class~="hello"] { font: 38px Helvetica; color: yellow; background: black; } ``` ```html <body> <h1 class="hello world">hello world</h1> <h1 class="hello China">hello world</h1> </body> ``` _只能用于 class?_ ```css img[title~="Figure"] { border: 1px solid gray; } ``` #### 以...開頭 ```css h1[class^="hello"] { font: 38px Helvetica; color: yellow; background: black; } ``` #### 以...結尾 ```css h1[class$="hello"] { font: 38px Helvetica; color: yellow; background: black; } ``` ## `^=`和`|=`的區別 - `^=`:以...開頭 - `|=`:以...為前綴 ## `~=`和`*=`的區別 - `~=`:包含某個單詞 - `*=`:包含某個字符串 ## 父與子, 祖宗與后代 ![](https://box.kancloud.cn/3ecdc4bfc22fea68295771ca7c8184cc_628x394.png) ## 后代選擇器 ```css div h1 { color: red; } ``` ```html <body> <div><h1>hello world</h1></div> <h1>hello world</h1> </body> ``` ## 選擇子元素 ```css div > h1 { color: red; } ``` ```html <body> <div><h1>hello world</h1></div> <h1>hello world</h1> </body> ``` _支持連招嗎?_ ```css div > h1 > span { color: red; } ``` ```html <body> <div> <h1><span>hello world</span></h1> </div> <h1>hello world</h1> </body> ``` ## 選擇相鄰兄弟元素 ```css div + h1 { color: red; } ``` ```html <body> <div></div> <h1><span>hello world</span></h1> <h1>hello world</h1> </body> ``` _兄弟元素, 支持連招嗎?_ ```css div + h1 { color: red; } ``` ```html <body> <div></div> <h1><span>hello world</span></h1> <h1>hello world</h1> </body> ``` ## 組合使用(注意閱讀順序) `html > body table + ul{margin-top:150px;}` ## 什么是偽類和偽元素 > 看不到的類或者元素, 可以理解成隱藏類或者元素, 有了它們, 我們就可以愉快的設置樣式了 ## 偽類的語法 `selector : pseudo-class {property: value}` **類和偽類, 可以搭配使用** `selector.class : pseudo-class {property: value}` ## 錨偽類 > 在支持 CSS 的瀏覽器中，鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> a:link { color: #ff0000; } /* 未訪問的鏈接 */ a:visited { color: #00ff00; } /* 已訪問的鏈接 */ a:hover { color: #ff00ff; } /* 鼠標移動到鏈接上 */ a:active { color: #0000ff; } /* 選定的鏈接 */ </style> </head> <body> <a href="https://www.baidu.com">百度一下, 你就更不知道了...</a> </body> </html> ``` ## 偽類與 CSS 類(可以混合使用) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> a.red:visited { color: #ff0000; } </style> </head> <body> <a class="red" ,href="https://www.baidu.com"> 百度一下, 你就更不知道了... </a> </body> </html> ``` ## first-child 偽類 > p:first-child 是`作為第一個兒子的p`,還是`p的第一個兒子`? **這三個例子的區別?** ```html <html> <head> <style type="text/css"> p:first-child { color: red; } </style> </head> <body> <p>some text</p> <p>some text</p> </body> </html> ``` ```html <html> <head> <style type="text/css"> p > i:first-child { font-weight: bold; } </style> </head> <body> <p> some <i>text</i> . some <i>text</i> . </p> <p> some <i>text</i> . some <i>text</i> . </p> </body> </html> ``` ```html <html> <head> <style type="text/css"> p:first-child i { color: blue; } </style> </head> <body> <p> some <i>text</i> . some <i>text</i> . </p> <p> some <i>text</i> . some <i>text</i> . </p> </body> </html> ``` ## 偽元素的語法： `selector:pseudo-element {property:value;}` ## CSS 類也可以與偽元素配合使用： `selector.class:pseudo-element {property:value;}` ## first-line 偽元素 > `first-line` 偽元素用于向文本的首行設置特殊樣式。 ```css p:first-line { color: #ff0000; } ``` > `first-line` 偽元素只能用于塊級元素。 > 下面的屬性可應用于 "first-line" 偽元素： - font 字體 - color 顏色 - background 背景 - word-spacing 字間距 - letter-spacing 單詞間距 - text-decoration 文本修飾 - vertical-align 垂直對齊 - text-transform 字母大小寫 - line-height 行高 - clear 清除浮動 ## first-letter 偽元素 > `first-letter` 偽元素用于向文本的首字母設置特殊樣式： ```css p:first-letter { color: #ff0000; font-size: xx-large; } ``` > `first-letter` 偽元素只能用于塊級元素。 > 下面的屬性可應用于 "first-letter" 偽元素： - font 字體 - color 顏色 - background 背景 - margin 外邊距 - padding 內邊距 - border 邊框 - text-decoration 文字修飾 - vertical-align 垂直對齊 - text-transform 文字大小寫 - line-height 行高 - float 浮動 - clear 清除浮動 ## 偽元素和 CSS 類 > 偽元素可以與 CSS 類配合使用： ```css p.article:first-letter { color: #ff0000; } ``` ## 多重偽元素 > 可以結合多個偽元素來使用。 ```css p:first-letter { color: #ff0000; font-size: xx-large; } p:first-line { color: #0000ff; } ``` ## :before 偽元素 > `:before` 偽元素可以在元素的內容前面插入新內容。在每個 <h1> 元素前面插入一幅圖片： ```css h1:before { content: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544389178954&di=e794054d37b261335810303897df4b5b&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8b13632762d0f703fb8b190102fa513d2697c536.jpg); } ``` ## after 偽元素 > `:after` 偽元素可以在元素的內容之后插入新內容。在每個 <h1> 元素后面插入一幅圖片： ```css h1:after { content: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544389178954&di=e794054d37b261335810303897df4b5b&imgtype=0&src=http%3A%2F%2Fc.hiphotos.baidu.com%2Fimage%2Fpic%2Fitem%2F8b13632762d0f703fb8b190102fa513d2697c536.jpg); } ``` 偽類的組合使用 ```html <html> <head> <style type="text/css"> h1:before { content: "hello world"; } h1:first-letter { color: red; } </style> </head> <body> <h1>I Love China && the Communist Party</h1> </body> </html> ``` ## 優先級繼承（Inheritance）是從一個元素向其后代元素傳遞屬性值所采用的機制。確定應當向一個元素應用哪些值時，瀏覽器不僅要考慮繼承，還要考慮聲明的優先級。這個過程就稱為層疊（cascade）。 ```css h1 { color: red; } body h1 { color: green; } h2.grape { color: purple; } h2 { color: silver; } html > body table tr[id="totals"] td ul > li { color: maroon; } li#answer { color: navy; } ``` **特殊性值表述為 4 個部分，如：0，0，0，0。一個選擇器的具體特殊性如下確定：** 對于選擇器中給定的各個 ID 屬性值，加 0，1，0，0。對于選擇器中給定的各個類屬性值，屬性選擇或偽類，加 0，0，1，0。對于選擇器中給定的各個元素和偽元素，加 0，0，0，1。結合符和通配符選擇器對特殊性沒有任何貢獻 ```css h1 { color: red; } /* specifity = 0,0,0,1 */ p em { color: purple; } /* specifity = 0,0,0,2 */ .grape { color: purple; } /* specifity = 0,0,1,0 */ *.bright { color: yellow; } /* specifity = 0,0,1,0 */ p.bright em.dark { color: maroon; } /* specifity = 0,0,2,2 */ #id216 { color: blue; } /* specifity = 0,1,0,0 */ div#sidebar *[href] { color: silver; } /* specifity = 0,1,1,1 */ ``` ```css h1 { color: red; } /* 0,0,0,1 */ body h1 { color: green; } /* 0,1,0,2 (winner)*/ h2.grape { color: purple; } /* 0,0,1,1 (winner)*/ h2 { color: silver; } /* 0,0,0,1 */ html > body table tr[id="totals"] td ul > li { color: maroon; } /* 0,0,1,7 */ li#answer { color: navy; } /* 0,1,0,1 (winner)*/ ``` PPT 寫到... ![](https://box.kancloud.cn/7abb35d9009edb7f7870db6a13307e94_1367x599.png) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> div div div div div div div div div div div div a { background: #000; } .baidu { background: #f00; } </style> </head> <body> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <div> <a class="baidu" href="" > 百度一下 </a> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </body> </html> ``` > 特殊性值 0,0,1,0 比值 0,0, 0,13 更高。 > 值是從左向右排序的。特殊性值 1,0, 0,0 大于以 0 開頭的所有特殊性值，而不論后面的數是什么。 ## 聲明和特殊性你是這么寫的... ```css h1 { color: silver; background: black; } ``` 瀏覽器是這么看的... ```css h1 { color: silver; } h1 { background: black; } ``` 這兩個規則的特殊性都是 0, 0 , 0 , 1,各聲明得到的特殊性值也就是 0, 0 , 0 , 1。 ```css h1, h2.section { color: silver; background: black; } ``` 用戶代理將把它處理為： ```css h1 { color: silver; } /* 0,0,0,1 */ h1 { background: black; } /* 0,0,0,1 */ h2.section { color: silver; } /* 0,0,1,1 */ h2.section { background: black; } /* 0,0,1,1 */ ``` 如果多個規則與同一個元素匹配，而且有些聲明相互沖突，在這種情況下特殊性就很重要。 ```css h1 + p { color: black; font-style: italic; } /* 0,0,0,2 */ p { color: gray; background: white; font-style: normal; } /* 0,0,0,1 */ *.aside { color: black; background: silver; } /* 0,0,1,0 */ ``` ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> h1 + p { color: black; font-style: italic; } /* 0,0,0,2 */ p { color: blue; background: white; font-style: normal; } /* 0,0,0,1 */ *.aside { color: black; background: yellow; } /* 0,0,1,0 */ </style> </head> <body> <h1>大家好啊!</h1> <p class="aside">今天是個好日子</p> <p>今天是個好日子, 心想的事兒都能成....</p> <h1>干了這碗毒雞湯</h1> <p>當你覺得自己又丑又窮的時候，不要悲傷，至少你的判斷是對的。</p> <p class="aside"> 你要是喜歡一個女生，從現在就開始好好學習，將來找好工作掙好多錢，等她結婚的時候多出點份子錢 </p> </body> </html> ``` ## 通配選擇器特殊性前面提到過，通配選擇器對一個選擇器的特殊性沒有貢獻。換句話說，其特殊性為 0,0,0,0 div 下包含的段落將是黑色，而其他元素都是灰色： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> div p { color: black; } /* 0,0,0,2 */ * { color: #ff0000; } /* 0,0,0,0 */ </style> </head> <body> <div><p>hello world</p></div> hello world </body> </html> ``` 如你所料，這意味著如果一個選擇器中包含通配選擇器和其他選擇器，該選擇器的特殊性不會因通配選擇器的出現而改變。下面兩個選擇器的特殊性完全相同： ```css div p /* 0,0,0,2 */ body * strong /* 0,0,0,2 */ ``` ## ID 和屬性選擇器的特殊性需要著重指出，ID 選擇器和指定 id 屬性的屬性選擇器在特殊性上有所不同。 ```css html > body table tr[id="totals"] td ul > li { color: maroon; } /* 0,0,1,7 */ li#answer { color: navy; } /* 0,1,0,1 {winner}*/ ``` 第二個規則中的 ID 選擇器（#answer）為選擇器的總特殊性貢獻了 0,1, 0,0。而在第一個規則中，屬性選擇器（[id="totals"]）只對總特殊性貢獻了 0,0,1,0。因此，給定以下規則，id 為 meadow 的元素將變成綠色： ```css #meadow { color: green; } /* 0,1,0,0 */ *[id:"meadow"] { color: red; } /* 0,0,1,0 */ ``` ## 內聯樣式特殊性還沒見過以 0 開頭的特殊性... 第一個 0 是為內聯樣式聲明保留的，它比所有其他聲明的特殊性都高。考慮以下規則和標記片段： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> #hello { color: red; } </style> </head> <body> <p id="hello" style="color:yellowgreen">hello world</p> </body> </html> ``` 假設這個規則應用到 h1 元素，h1 的文本還將是綠色。 CSS2.1 中就是如此，這是因為每個內聯聲明的特殊性都是 1,0, 0,0。 ## 重要性有時某個聲明可能非常重要，超過了所有其他聲明。css 允許在這些聲明的結束分號之前插入！important 來標志。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> #hello { color: red !important; } </style> </head> <body> <p id="hello" style="color:yellowgreen">hello world</p> </body> </html> ``` 如果你希望把兩個聲明都標志為重要，那么每個聲明都需要它自己的!important 標志： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> #hello { color: red !important; background: black !important; } </style> </head> <body> <p id="hello" style="color:yellowgreen;background: grey;"> hello world </p> </body> </html> ``` 必須正確地放置`!important`,否則聲明將無效。 `!important` 總是放在聲明的最后，即分號前面。如果一個屬性的值可以包含多個關鍵詞，如 font,這一點則尤其重要，必須將`!important` 標志放在聲明的最后： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style> p.light { color: red; font: smaller Times, serif !important; } </style> </head> <body> <p class="light" id="hello" style="color:yellowgreen;background: grey;"> hello world </p> </body> </html> ``` 如果!important 放在 font 聲明的任何其他位置，整個聲明都將無效，相應地不會應用其任何樣式。標志為!important 的聲明并沒有特殊的特殊性值，不過要與非重要聲明分開考慮。