本博文介紹CSS中的基礎選擇器和複合選擇器。基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器，複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。 ...
本博文介紹CSS中的基礎選擇器和複合選擇器。
基礎選擇器包括標簽選擇器、類選擇器、id選擇器和通配符選擇器，複合選擇器包括後代選擇器、子選擇器、並集選擇器和偽類選擇器。
1 基礎選擇器
基礎選擇器由單個選擇器組成，包括：標簽選擇器、類選擇器、id選擇器和通配符選擇器。
1.1 標簽選擇器
標簽選擇器通過單個元素標簽（如p、div、h1）選擇對應的元素，使用標簽選擇器會選擇到所有的對應標簽。
使用格式：
標簽名{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實例：
div{ height: 100px; width: 100px; }
實例作用：將所有的 div 元素的高（height）和寬（width）設置為100px
1.2 類選擇器
類選擇器通過元素的類名（class）對元素進行選擇，可以選擇到一個或者多個元素標簽，該選擇器在開發中最常用。
使用格式：
.類名{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實例：
.red-box{ color: red; }
實例作用：將類名為"red-box"的元素中的字體顏色（color）設置為紅色（red）
1.3 id選擇器
id 選擇器通過元素的 id 對元素進行選擇，該選擇器只能選擇到一個元素標簽（因為元素的 id 是唯一的），id 選擇器經常和 js 搭配使用。
使用格式：
#id值{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實例：
#content_left{ text-align: left; }
實例作用：將 id 為"content_left"的元素中的文字內容設置左對齊（text-align: left;）
1.4 通配符選擇器
通配符選擇器可以選擇頁面中的所有元素，在去除掉頁面中的預設樣式時有很好的作用。
使用格式：
*{ 屬性1: 屬性值1; 屬性2: 屬性值2; }
使用實例：
*{ margin: 0; padding: 0; }
實例作用：將頁面中所有元素的外邊距（margin）和內邊距（padding）都設置為0（此實例使用頻率很高）
2 複合選擇器
複合選擇器由多個基礎選擇器組成，常用的包括：後代選擇器、子選擇器、並集選擇器和偽類選擇器。
2.1 後代選擇器
後代選擇器可以選擇某個元素的所有後代元素（包括兒子元素、孫子元素等）。
使用格式：
元素1 元素2 元素3{ 樣式 }
註意：
（1）元素和元素之間用空格隔開；
（2）元素1、元素2、元素3...為基礎選擇器（標簽選擇器、類選擇器、id選擇器等）。
使用實例：
div p{ color: red; }
實例作用：將所有 div 元素的所有子元素 p 中的字體顏色（color）設置為紅色（red）
2.2 子選擇器
子選擇器可以選擇某個元素的最近一級子元素（只包括兒子元素，不包括孫子元素等）。
使用格式：
元素1 > 元素2{ 樣式 }
註意：
（1）元素和元素之間用 > 隔開；
（2）元素1、元素2...為基礎選擇器（標簽選擇器、類選擇器、id選擇器等）。
使用實例：
div > p{ color: red; }
實例作用：將所有 div 元素的所有兒子元素 p 中的字體顏色（color）設置為紅色（red）
2.3 並集選擇器
並集選擇器可以選擇多組元素並設置相同的樣式。
使用格式：
元素1, 元素2{ 樣式 }
註意：
（1）元素和元素之間用 , 隔開；
（2）元素1、元素2...為基礎選擇器（標簽選擇器、類選擇器、id選擇器等）。
使用實例：
.left-box, .right-box{ color: red; }
實例作用：將所有類名為"left-box"和"right-box"的元素中的字體顏色（color）設置為紅色（red）
2.4 偽類選擇器
偽類選擇器用於向某些選擇器添加特殊的效果，這裡介紹鏈接偽類選擇器和 focus偽類選擇器。
使用格式：在選擇器後用冒號表示，如 :hover、:active等。
- 鏈接偽類選擇器
鏈接偽類選擇器通過將元素選擇器（a 元素）和偽類選擇器複合，起到不同的效果，具體可以分為以下四種。
| 鏈接偽類選擇器 | 選擇元素 |
| a:link | 選擇到所有未被訪問的 a 元素 |
| a:visited | 選擇到所有已被訪問的 a 元素 |
| a:hover | 選擇到滑鼠指針位於其上的 a 元素 |
| a:active | 選擇活動鏈接（滑鼠按下未彈起的 a 元素） |
註意：為了確保鏈接偽類選擇器生效，需按照link、visited、hover、active的順序來寫。
使用實例：
a:hover{ color: red; }
實例作用：當滑鼠移到 a 元素上時，鏈接的文字顏色（color）變為紅色（red）
- focus偽類選擇器（:focus）
focus偽類選擇器可以選取獲得焦點（游標）的表單元素。
使用格式：
input:focus{ 樣式 }
使用實例：
input:focus{ background-color: skyblue; }
實例作用：當游標聚焦在 input 元素上時，input 元素的背景顏色（background-color）變為天藍色（skyblue）
