CSS設計指南（第三版）學習筆記 - 選擇符彙總

CSS的選擇符還是很多的，特別是CSS3裡又新增了些，為了方便記憶，特將《CSS設計指南（第三版）》（圖靈出版）有關選擇符章節的闡述做個歸納彙整。
順帶誇一下本書：第二版我就看過，這次的第三版針對HTML5和CSS3的最新發展，進行了全面更新，內容更出彩，組織更合理，思路更清晰，邏輯更突出，是一本循序漸進式的掌握CSS3知識的好書。

1. 上下文選擇符
p em {color:green;}
標籤1 標籤2 {宣告}，標籤2就是我們想要選擇目標，而且只有在標籤1是其祖先元素（不一定是父元素）的情況下才會被選中。

2. 子選擇符>
section >h2 {font-style:italic;}
標籤1 > 標籤2 {宣告}，標籤1必須是標籤2的父元素。

3. 緊鄰同胞選擇符+
h2 +p {font-variant:small-caps;}
標籤1 + 標籤2 {宣告}，標籤2必須緊跟在其同胞標籤1的後面。

4. 一般同胞選擇符~
h2 ~a {color:red;}
標籤1 ~ 標籤2 {宣告}，標籤2必須跟（不一定緊跟）在其同胞標籤1後面。

5. 通用選擇符*
* {color:green;}
* {宣告}，通用選擇符常被稱為星號選擇符，是一個萬用字元，它匹配任何元素，殺傷力巨大。
不過，一般在使用選擇符時，都會同時使用另一個選擇符，比如：
p * {color:red;}
這樣只會把p包含的所有元素的文字變成紅色。
還可以用它構成非子選擇符，比如：
section * a {font-size:1.3em;}
任何是section孫子元素，而非子元素的a標籤都會被選中。至於a的父元素是什麼，沒有關係。

6. 類選擇符
.specialtext {font-style:italic;}
.類名 {宣告}，類選擇符就是在HTML類名前面加一個點（英文句號）。

7. 標籤帶類選擇符
p.specialtext {color:red;}
標籤.類名 {宣告}，如上，只選擇帶specialtext類的段落，設定紅色。
p.specialtext span {font-weight:bold;}，帶specialtext類的段落->span裡的內容為粗體。

8. 多類選擇符
什麼是多類？！：
<p class="specialtext featured">Here the span tag <span>may or may not</span> be styled.</p>
這好像不常用哦？
HTML的class屬性可以有多個空格分隔的值。要選擇同時存在這兩個類名的元素，可以這樣寫：
.specialtext.featured {font-size:120%;}
注意，CSS選擇符的兩個類名之間沒有空格。

9. ID屬性
ID與類的寫法相似，而且表示ID選擇符的#（井號）的用法，也跟表示類選擇符的.（句號）類似。
如果有一個段落像下面這樣設定了ID屬性：
<p id="specialtext">This is the special text.</p>
那麼，相應的ID選擇符就是這樣的：
#specialtext {宣告}
或者這樣的：
p#specialtext {宣告}

10. 廣告插播時間：什麼時候用ID？什麼時候用類？以及若干注意點
ID的用途是在頁面中唯一地標識一個元素。ID值的唯一性對JavaScript尤其重要，通過ID，JavaScript就能與某個標籤關聯起來，並玩出動感花樣出來。經常會給頁面中每個頂級區域都新增一個ID，從而得到非常明確的上下文，以便編寫CSS時只選擇巢狀在相應區域內的標籤。
類的目的是為了標識一組具有相同特徵的元素。你不要像使用 ID 一樣，每個類都指定一個不同的類名，然後再為每個類編寫規則。

11. 屬性名選擇符
img[title] {border:2px solid blue;}
會導致像下面這個帶有title屬性的HTML img元素顯示2畫素寬的藍色邊框，至於title屬性有什麼值，無關緊要，只要有這個屬性在就行啦。
<img src="images/yellow_flower.jpg" title="yellow flower" alt="yellow flower" />
標籤名[屬性名] {宣告}。

12. 屬性值選擇符
img[title="red flower"] {border:4px solid green;}
標籤名[屬性名="屬性值"] {宣告}，這個一看就懂了。

13. 預熱一下：“偽類”
偽類這個叫法源自它們與類相似，但實際上並沒有類會附加到標記中的標籤上。偽類分兩種。

• UI（User Interface，使用者介面）偽類會在HTML元素處於某個狀態時（比如滑鼠指標位於連結上），為該元素應用CSS樣式。
• 結構化偽類會在標記中存在某種結構上的關係時（如某個元素是一組元素中的第一個或最後一個），為相應元素應用CSS樣式。

14. 連結偽類 - UI偽類
針對連結的偽類一共有4個，因為連結始終會處於如下4種狀態之一。

• Link。此時，連結就在那兒等著使用者點選。
• Visited。使用者此前點選過這個連結。
• Hover。滑鼠指標正懸停在連結上。
• Active。連結正在被點選（滑鼠在元素上按下，還沒有釋放）。

以下就是這些狀態對應的4個偽類選擇符（使用了a選擇符和一些示例宣告）：
a:link {color:black;}
a:visited{color:gray;}
a:hover{text-decoration:none;}
a:active{color:red;}

由於這4個偽類的特指度相同，如果不按照這裡列出的順序使用它們，瀏覽器可能不會顯示預期結果。為了好記，我建議大家可以這麼想：“LoVe? HA!”大寫字母就是每個偽類的頭一個字母。
選擇符中與眾不同的:（冒號）好像在向我們宣示：“我是一個偽類！”。一個冒號（:）表示偽類，兩個冒號（::）表示CSS3新增的偽元素。儘管瀏覽器目前都支援對CSS 1和CSS 2的偽元素使用一個冒號，但希望你能習慣於用雙冒號代替單冒號，因為這些單冒號的偽元素最終可能都會被淘汰掉。

15. :focus偽類 - UI偽類
input:focus {border:1px solid blue;}
會在游標位於input欄位中時，為該欄位新增一個藍色邊框。這樣可以讓使用者明確地知道輸入的字元會出現在哪裡。
e:focus {宣告}。

16. :target偽類 - UI偽類
<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的元素時，為該元素新增淺灰色背景。
e:target {宣告}。

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

:first-child和:last-child
e:first-child
e:last-child
:first-child代表一組同胞元素中的第一個元素，而:last-child則代表最後一個。
比如，把下面的規則
ol.results li:first-child {color:blue;}
應用給以下標記：

<ol class="results">
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
</ol>

文字“My Fast Pony”就會變成藍色。

:nth-child
e:nth-child(n)
e表示元素名，n表示一個數值（也可以使用odd或even）。
li:nth-child(3)
選擇一組列表項中的每個第三項。

18. 偽元素
偽元素就是你的文件中若有實無的元素。
注意：搜尋引擎不會取得偽元素的資訊（因為它在標記中並不存在）。因此，不要通過偽元素新增你想讓搜尋引擎索引的重要內容。

::first-letter
p::first-letter {font-size:300%;}
段落首字元放大。
e::first-letter {宣告}

::first-line
選中文字段落（一般情況下是段落）的第一行。

::before和::after偽元素
可用於在特定元素前面或後面新增特殊內容。
以下標記
<p class="age">25</p>
和如下樣式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
能得到以下結果：
Age: 25 years.