摘要：規(guī)則命名慣例規(guī)則由選擇符和聲明兩部分組成，其中選擇符用于指出規(guī)則所要選擇的元素，聲明則又由兩部分組成屬性和值。用于選擇作為指定祖先元素后代的標(biāo)簽。維基百科在其引證中大量使用了偽類(lèi)。維基百科的引證鏈接就是正文里那些不起眼的數(shù)字鏈接。

行內(nèi)樣式（寫(xiě)在特定 HTML 標(biāo)簽的 style 屬性里）

嵌入樣式（嵌入的 CSS 樣式是放在 HTML 文檔的 head 元素中）

鏈接樣式
在創(chuàng)建包含多個(gè)頁(yè)面的網(wǎng)站時(shí)，需要把樣式集中在一個(gè)多帶帶的文件里，這個(gè)文件就叫 樣式表。樣式表其實(shí)就是一個(gè)擴(kuò)展名為 .css 的文本文件。可以在任意多個(gè) HTMl 頁(yè)面中鏈接同一個(gè)樣式表文件，每個(gè)頁(yè)面中只需加入類(lèi)似下面的一行代碼即可：

  
除了以上三種為頁(yè)面添加樣式的方法，還有一種在樣式表中鏈接其它樣式表的方法，那就是應(yīng)用 @import 指令。就像這樣：@import url(css/styles2.css).

  要注意的是， @import 指令必須出現(xiàn)在樣式表中其他樣式之前，否則 @import 引用的樣式表不會(huì)被加載。

CSS 規(guī)則由 選擇符 和 聲明 兩部分組成，其中選擇符用于指出規(guī)則所要選擇的元素，聲明則又由兩部分組成：屬性 和 值。屬性指出要影響元素哪方面的樣式，值就是屬性的一個(gè)新?tīng)顟B(tài)。

對(duì)于這個(gè)基本的結(jié)構(gòu)，有三種方法可以進(jìn)行擴(kuò)展：

多個(gè)聲明包含在一條規(guī)則里

多個(gè)選擇符組合在一起

多條規(guī)則應(yīng)用給一條選擇符

所有用于選擇特定元素的選擇符又分三種：

上下文選擇符（基于祖先或同胞元素選擇一個(gè)元素）

ID和類(lèi)選擇符（基于 id 和 class 屬性的值選擇的元素）

屬性選擇符（基于屬性的有無(wú)和特征選擇元素）

格式：標(biāo)簽 1 標(biāo)簽 2 {聲明}
示例：article p {font-weight:bold;}
說(shuō)明：標(biāo)簽2就是我們想要選擇目標(biāo)，而且只有在標(biāo)簽 1 是是其祖先元素（不一定是父元素）的情況下才會(huì)被選中。

  
上下文選擇符，嚴(yán)格來(lái)講（也就是 CSS 規(guī)范里），叫后代組合式選擇符（ descendant combinator selector），就是一組以空格分隔的標(biāo)簽名。用于選擇作為指定祖先元素后代的標(biāo)簽。

  
提示：請(qǐng)記住，上下文選擇符以空格作為分隔符，而分組選擇符則以逗號(hào)作為分隔符。

格式：標(biāo)簽 1 > 標(biāo)簽 2
示例：section > h2 {font-style:italic;}
說(shuō)明：標(biāo)簽 2 必須是標(biāo)簽 1 的子元素，或者反過(guò)來(lái)說(shuō)， 標(biāo)簽 1 必須是標(biāo)簽 2 的父元素。與常規(guī)的上下文選擇符不同，這個(gè)選擇符中的標(biāo)簽 1 不能是標(biāo)簽 2 的父元素之外的其他祖先元素。

格式：標(biāo)簽 1 + 標(biāo)簽 2
示例：h2 + p {font-variant:small-caps;}
說(shuō)明：標(biāo)簽 2 必須緊跟在其同胞標(biāo)簽 1 的后面。

格式：標(biāo)簽 1 ~ 標(biāo)簽 2
示例：h2 ~ a {color:red;}
說(shuō)明：標(biāo)簽 2 必須跟（不一定緊跟）在其同胞標(biāo)簽 1 后面。

格式：* {...}
示例：* {color:green;}
說(shuō)明：上面示例會(huì)導(dǎo)致所有元素（的文本和邊框）都變成綠色。
不過(guò)，一般在使用 * 選擇符時(shí)，都會(huì)同時(shí)使用另一個(gè)選擇符。
例如：p * {color:red;} // 這樣只會(huì)把p包含的所有元素的文本變成紅色。
還有一個(gè)非常有意思的用法，即用它構(gòu)成非子選擇符：
例如：section * a {font-size:1.3em;}
這樣，任何是 section 孫子元素，而非子元素的 a 標(biāo)簽都會(huì)被選中。至于 a
的父元素是什么，沒(méi)有關(guān)系。
總之，只有一個(gè)標(biāo)簽名的選擇符會(huì)選中頁(yè)面中所有相同標(biāo)簽的實(shí)例。而通過(guò)上下文
選擇符，則可以指定標(biāo)簽必須具備相應(yīng)的祖先或同胞。

ID 和類(lèi)為我們選擇元素提供了另一套手段，利用它們可以不用考慮文檔的層次結(jié)構(gòu)。

  
注意：可以給 id 和 class 屬性設(shè)定任何值，但不能以數(shù)字或特殊符號(hào)開(kāi)頭。

格式：.類(lèi)名
示例：.specialtext {font-style:italic;}

格式：標(biāo)簽名.類(lèi)名
示例：p.specialtext {color:red;}

格式：.類(lèi)名.類(lèi)名
示例：.specialtext.featured {font-size:120%;}
說(shuō)明：CSS選擇符的兩個(gè)類(lèi)名之間沒(méi)有空格，因?yàn)槲覀冎幌脒x擇同時(shí)具有這兩個(gè)類(lèi)名的的那個(gè)元素。如果加了空格，那就變成了“祖先/后代”關(guān)系的上下文選擇符了。

  
提示：不要像使用 ID 一樣，每個(gè)類(lèi)都指定一個(gè)不同的類(lèi)名，然后再為每個(gè)類(lèi)編寫(xiě)規(guī)則。如果你確實(shí)有這種隨意使用類(lèi)的習(xí)慣，那說(shuō)明你可能想大多數(shù)對(duì) CSS 充滿(mǎn)激情的初學(xué)者一樣，還不了解繼承和上下文選擇符的作用。 于是，你可能會(huì)給每個(gè)標(biāo)簽都重復(fù)寫(xiě)同樣的樣式（比如為頁(yè)面中很多標(biāo)簽分別指定相同的字體）。實(shí)際上，繼承和上下文選擇符能讓不同的標(biāo)簽共享樣式，從而降低你需要編寫(xiě)和維護(hù)的 CSS 量。

格式：#ID名 或 標(biāo)簽名#ID名
示例：#specialtext {CSS 樣式聲明 } 或 p#specialtext {CSS 樣式聲明 }

  
提示：ID還可以用于頁(yè)內(nèi)導(dǎo)航。 例如：Biography，注意 href 屬性值開(kāi)頭的 # ，它表示這個(gè)鏈接的目標(biāo)在當(dāng)前頁(yè)面中，因而不會(huì)觸發(fā)瀏覽器加載頁(yè)面（如果沒(méi)有 #，瀏覽器就會(huì)嘗試加載 bio 目錄下的默認(rèn)頁(yè)面了）。如果鏈接的 href 屬性里只有一個(gè) #，那么點(diǎn)擊該鏈接會(huì)返回頁(yè)面頂部。例如：Back to Top，換句話(huà)說(shuō)，要寫(xiě)一個(gè)“返回頂部”鏈接，根本不需要 ID 為 # 的目標(biāo)元素。

  
注意：如果暫時(shí)不知道某個(gè) href 應(yīng)該放什么 URL，也可以用 # 作為占位符，但不能把該屬性留空。 因?yàn)?href 屬性值為空的鏈接的行為跟正常鏈接不一樣。這樣，團(tuán)隊(duì)中的其他人將來(lái)可以用中間層（比如 PHP）變量替換 #，以便動(dòng)態(tài)接收來(lái)自數(shù)據(jù)庫(kù)的 URL。

格式：標(biāo)簽名[屬性名]
示例：img[title] {border:2px solid blue;}

  
提示：一般來(lái)說(shuō)，人們經(jīng)常給 alt 和 title 屬性設(shè)定相同的值。 alt 屬性中的文本會(huì)在圖片因故未能加載時(shí)顯示，或者由屏幕閱讀器朗讀出來(lái)。而 title 屬性會(huì)在用戶(hù)鼠標(biāo)移動(dòng)到圖片上時(shí)，顯示一個(gè)包含相應(yīng)文本的提示。

格式：[屬性名="屬性值"]
示例：img[title="red flower"] {border:4px solid green;}
說(shuō)明：在 HTML5 中， 屬性值的引號(hào)可加可不加，在此為了清楚起見(jiàn)，建議添加。

  
偽類(lèi)（Pseudo classes）是選擇符的螺栓，用來(lái)指定一個(gè)或者與其相關(guān)的選擇符的狀態(tài)。它們的形式是 selector:pseudo class { property: value; }，簡(jiǎn)單地用一個(gè)半角英文冒號(hào)（:）來(lái)隔開(kāi)選擇符和偽類(lèi)。

偽類(lèi)可以分為兩種：

UI（ User Interface，用戶(hù)界面）偽類(lèi)會(huì)在 HTML 元素處于某個(gè)狀態(tài)時(shí)（比如鼠標(biāo)
指針位于鏈接上），為該元素應(yīng)用 CSS 樣式。

結(jié)構(gòu)化偽類(lèi)會(huì)在標(biāo)記中存在某種結(jié)構(gòu)上的關(guān)系時(shí)（如某個(gè)元素是一組元素中的第
一個(gè)或最后一個(gè)），為相應(yīng)元素應(yīng)用 CSS 樣式。

針對(duì)鏈接的偽類(lèi)一共有4個(gè)，因?yàn)殒溄邮冀K會(huì)處于如下4種狀態(tài)之一。

Link

Visited

Hover

Active

  
提示：由于這4個(gè)偽類(lèi)的特指度相同，如果不按照這里列出的順序使用它們，瀏覽器可能不會(huì)顯示預(yù)期效果。方便記憶：LoVe? HA! 大寫(xiě)字母就是每個(gè)偽類(lèi)的頭一個(gè)字母。

  
提示：一個(gè)冒號(hào)（ : ）表示偽類(lèi)，兩個(gè)冒號(hào)（ :: ）表示 CSS3 新增的偽元素。

表單中的文本字段在用戶(hù)單擊它時(shí)會(huì)獲得焦點(diǎn)，然后用戶(hù)才能在其中輸入字符。
例如：input:focus {border:1px solid blue;}
上面一行代碼會(huì)在光標(biāo)位于 input 字段中時(shí)，為該字段添加一個(gè)藍(lán)色邊框。這樣可以讓用戶(hù)明確地知道輸入的字符會(huì)出現(xiàn)在哪里。

如果用戶(hù)點(diǎn)擊一個(gè)指向頁(yè)面中其他元素的鏈接，則那個(gè)元素就是目標(biāo)（ target），可以
用:target 偽類(lèi)選中它。
例如：對(duì)于這個(gè)鏈接：More Information
位于頁(yè)面的其它地方、ID 為 more_info 的那個(gè)元素就是目標(biāo)。
假設(shè)該元素為這樣：

This is the information you are looking for.

  
維基百科在其引證中大量使用了:target 偽類(lèi)。維基百科的引證鏈接就是正文里那些

  不起眼的數(shù)字鏈接。引證本身則位于長(zhǎng)長(zhǎng)的頁(yè)面的最下方。如果沒(méi)有:target 應(yīng)用的

  突出顯示，很難知道你點(diǎn)擊的鏈接對(duì)應(yīng)著一大堆引證中的哪一個(gè)。

結(jié)構(gòu)化偽類(lèi)可以根據(jù)標(biāo)記的結(jié)構(gòu)應(yīng)用樣式，比如根據(jù)某元素的父元素或前面的同胞元素是什么。

格式：
e:first-child
e:last-child
示例：ol.results li:first-child {color:blue;}

格式：e:nth-child(n)
示例：li:nth-child(3)
說(shuō)明：e 表示元素名，n 表示一個(gè)數(shù)值（也可以使用 odd 或 even）

顧名思義，偽元素就是你的文檔中若有實(shí)無(wú)的元素。

格式：e::first-letter
示例：p::first-letter {font-size:300%;}

  
提示：如果不用偽元素創(chuàng)建這個(gè)首字符放大效果，必須手工給該字母加上標(biāo)簽，

  然后再為該標(biāo)簽應(yīng)用樣式。而偽元素實(shí)際上是替我們添加了無(wú)形的標(biāo)簽。

格式：e::first-line
示例：p::first-line {font-variant:small-caps;}
說(shuō)明：選中文本段落（一般情況下是段落）的第一行。

格式：
e::before
e::after
示例：
對(duì)標(biāo)記：

25

  
提示：如果標(biāo)簽中的內(nèi)容是通過(guò)數(shù)據(jù)庫(kù)查詢(xún)生成的結(jié)果，那么用這種技巧再合適不過(guò)了。

  因?yàn)樗薪Y(jié)果都是數(shù)字，使用這兩個(gè)偽元素可以在把數(shù)字呈現(xiàn)給用戶(hù)時(shí)，加上說(shuō)明

  性文字。

參考資料

CSS設(shè)計(jì)指南