CSS學習筆記(三) CSS選擇器

1.爲文檔添加樣式的三種方法

• 行內樣式（寫在特定 HTML 標籤的 style 屬性裏）

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

• 鏈接樣式
  在創建包含多個頁面的網站時，需要把樣式集中在一個單獨的文件裏，這個文件就叫 樣式表。樣式表其實就是一個擴展名爲 .css 的文本文件。可以在任意多個 HTMl 頁面中鏈接同一個樣式表文件，每個頁面中只需加入類似下面的一行代碼即可：
  <link href="styles.css" rel="stylesheet" type="text/css" />

除了以上三種爲頁面添加樣式的方法，還有一種在樣式表中鏈接其它樣式表的方法，那就是應用 @import 指令。就像這樣：@import url(css/styles2.css).
要注意的是， @import 指令必須出現在樣式表中其他樣式之前，否則 @import 引用的樣式表不會被加載。

2.CSS規則命名慣例

CSS 規則由 選擇符 和 聲明 兩部分組成，其中選擇符用於指出規則所要選擇的元素，聲明則又由兩部分組成：屬性 和 值。屬性指出要影響元素哪方面的樣式，值就是屬性的一個新狀態。

對於這個基本的結構，有三種方法可以進行擴展：

• 多個聲明包含在一條規則裏

• 多個選擇符組合在一起

• 多條規則應用給一條選擇符

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

• 上下文選擇符（基於祖先或同胞元素選擇一個元素）

• ID和類選擇符（基於 id 和 class 屬性的值選擇的元素）

• 屬性選擇符（基於屬性的有無和特徵選擇元素）

3.上下文選擇符

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

上下文選擇符，嚴格來講（也就是 CSS 規範裏），叫後代組合式選擇符（ descendant combinator selector），就是一組以空格分隔的標籤名。用於選擇作爲指定祖先元素後代的標籤。

提示：請記住，上下文選擇符以空格作爲分隔符，而分組選擇符則以逗號作爲分隔符。

4.特殊的上下文選擇符

4.1 子選擇符 >

格式：標籤 1 > 標籤 2
示例：section > h2 {font-style:italic;}
說明：標籤 2 必須是標籤 1 的子元素，或者反過來說， 標籤 1 必須是標籤 2 的父元素。與常規的上下文選擇符不同，這個選擇符中的標籤 1 不能是標籤 2 的父元素之外的其他祖先元素。

4.2 緊鄰同胞選擇符 +

格式：標籤 1 + 標籤 2
示例：h2 + p {font-variant:small-caps;}
說明：標籤 2 必須緊跟在其同胞標籤 1 的後面。

4.3 一般同胞選擇符 ~

格式：標籤 1 ~ 標籤 2
示例：h2 ~ a {color:red;}
說明：標籤 2 必須跟（不一定緊跟）在其同胞標籤 1 後面。

4.4 通用選擇符 *

格式：* {...}
示例：* {color:green;}
說明：上面示例會導致所有元素（的文本和邊框）都變成綠色。
不過，一般在使用 * 選擇符時，都會同時使用另一個選擇符。
例如：p * {color:red;} // 這樣只會把p包含的所有元素的文本變成紅色。
還有一個非常有意思的用法，即用它構成非子選擇符：
例如：section * a {font-size:1.3em;}
這樣，任何是 section 孫子元素，而非子元素的 a 標籤都會被選中。至於 a
的父元素是什麼，沒有關係。
總之，只有一個標籤名的選擇符會選中頁面中所有相同標籤的實例。而通過上下文
選擇符，則可以指定標籤必須具備相應的祖先或同胞。

5.ID 和類選擇符

ID 和類爲我們選擇元素提供了另一套手段，利用它們可以不用考慮文檔的層次結構。

注意：可以給 id 和 class 屬性設定任何值，但不能以數字或特殊符號開頭。

5.1 類屬性

5.1.1 類選擇符

格式：.類名
示例：.specialtext {font-style:italic;}

5.1.2 標籤帶類選擇符

格式：標籤名.類名
示例：p.specialtext {color:red;}

5.1.3 多類選擇符

格式：.類名.類名
示例：.specialtext.featured {font-size:120%;}
說明：CSS選擇符的兩個類名之間沒有空格，因爲我們只想選擇同時具有這兩個類名的的那個元素。如果加了空格，那就變成了“祖先/後代”關係的上下文選擇符了。

提示：不要像使用 ID 一樣，每個類都指定一個不同的類名，然後再爲每個類編寫規則。如果你確實有這種隨意使用類的習慣，那說明你可能想大多數對 CSS 充滿激情的初學者一樣，還不瞭解繼承和上下文選擇符的作用。 於是，你可能會給每個標籤都重複寫同樣的樣式（比如爲頁面中很多標籤分別指定相同的字體）。實際上，繼承和上下文選擇符能讓不同的標籤共享樣式，從而降低你需要編寫和維護的 CSS 量。

5.2 ID屬性

格式：#ID名 或 標籤名#ID名
示例：#specialtext {CSS 樣式聲明 } 或 p#specialtext {CSS 樣式聲明 }

提示：ID還可以用於頁內導航。 例如：<a href="#bio">Biography</a>，注意 href 屬性值開頭的 # ，它表示這個鏈接的目標在當前頁面中，因而不會觸發瀏覽器加載頁面（如果沒有 #，瀏覽器就會嘗試加載 bio 目錄下的默認頁面了）。如果鏈接的 href 屬性裏只有一個 #，那麼點擊該鏈接會返回頁面頂部。例如：<a href="#">Back to Top</a>，換句話說，要寫一個“返回頂部”鏈接，根本不需要 ID 爲 # 的目標元素。

注意：如果暫時不知道某個 href 應該放什麼 URL，也可以用 # 作爲佔位符，但不能把該屬性留空。 因爲 href 屬性值爲空的鏈接的行爲跟正常鏈接不一樣。這樣，團隊中的其他人將來可以用中間層（比如 PHP）變量替換 #，以便動態接收來自數據庫的 URL。

6.屬性選擇符

6.1 屬性名選擇符

格式：標籤名[屬性名]
示例：img[title] {border:2px solid blue;}

提示：一般來說，人們經常給 alt 和 title 屬性設定相同的值。 alt 屬性中的文本會在圖片因故未能加載時顯示，或者由屏幕閱讀器朗讀出來。而 title 屬性會在用戶鼠標移動到圖片上時，顯示一個包含相應文本的提示。

6.2 屬性值選擇符

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

7.僞類

僞類（Pseudo classes）是選擇符的螺栓，用來指定一個或者與其相關的選擇符的狀態。它們的形式是 selector:pseudo class { property: value; }，簡單地用一個半角英文冒號（:）來隔開選擇符和僞類。

僞類可以分爲兩種：

• UI（ User Interface，用戶界面）僞類會在 HTML 元素處於某個狀態時（比如鼠標
  指針位於鏈接上），爲該元素應用 CSS 樣式。

• 結構化僞類會在標記中存在某種結構上的關係時（如某個元素是一組元素中的第
  一個或最後一個），爲相應元素應用 CSS 樣式。

7.1 UI僞類

7.1.1 鏈接僞類

針對鏈接的僞類一共有4個，因爲鏈接始終會處於如下4種狀態之一。

• Link
• Visited
• Hover
• Active

提示：由於這4個僞類的特指度相同，如果不按照這裏列出的順序使用它們，瀏覽器可能不會顯示預期效果。方便記憶：LoVe? HA! 大寫字母就是每個僞類的頭一個字母。

提示：一個冒號（ : ）表示僞類，兩個冒號（ :: ）表示 CSS3 新增的僞元素。

7.1.2 :focus僞類

表單中的文本字段在用戶單擊它時會獲得焦點，然後用戶才能在其中輸入字符。
例如：input:focus {border:1px solid blue;}
上面一行代碼會在光標位於 input 字段中時，爲該字段添加一個藍色邊框。這樣可以讓用戶明確地知道輸入的字符會出現在哪裏。

7.1.3 :target僞類

如果用戶點擊一個指向頁面中其他元素的鏈接，則那個元素就是目標（ target），可以
用:target 僞類選中它。
例如：對於這個鏈接：<a href="#more_info">More Information</a>
位於頁面的其它地方、ID 爲 more_info 的那個元素就是目標。
假設該元素爲這樣：<h2 id="more_info">This is the information you are looking for.</h2>
那麼，CSS規則：#more_info:target {background:#eee}
會在用戶單擊鏈接轉向 ID 爲 more_info 的元素時，爲該元素添加灰色背景。

維基百科在其引證中大量使用了:target 僞類。維基百科的引證鏈接就是正文裏那些
不起眼的數字鏈接。引證本身則位於長長的頁面的最下方。如果沒有:target 應用的
突出顯示，很難知道你點擊的鏈接對應着一大堆引證中的哪一個。

7.2 結構化僞類

結構化僞類可以根據標記的結構應用樣式，比如根據某元素的父元素或前面的同胞元素是什麼。

7.2.1 :first-child和:last-child

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

7.2.2 :nth-child

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

8.僞元素

顧名思義，僞元素就是你的文檔中若有實無的元素。

8.1 ::first-letter僞元素

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

提示：如果不用僞元素創建這個首字符放大效果，必須手工給該字母加上標籤，
然後再爲該標籤應用樣式。而僞元素實際上是替我們添加了無形的標籤。

8.2 ::first-line僞元素

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

8.3 ::before和::after僞元素

格式：
e::before
e::after
示例：
對標記：
<p class="age">25</p>
添加如下樣式：
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
會得到如下結果：
Age: 25 years.

提示：如果標籤中的內容是通過數據庫查詢生成的結果，那麼用這種技巧再合適不過了。
因爲所有結果都是數字，使用這兩個僞元素可以在把數字呈現給用戶時，加上說明
性文字。

---

參考資料

• CSS設計指南