屬性選擇器
屬性選擇器可以根據元素的屬性及屬性值來選擇元素。CSS3中新增了 3 種屬性選擇器：E[att^=value]、E[att$=value] 和 E[att*=value]
1.E[att^=value] 屬性選擇器
E[att^=value] 屬性選擇器是指選擇名稱為 E 的標記，且該標記定義了 att 屬性，att 屬性值包含前綴為 value 的子字符串。其中 E 是可以省略的，如果省略則表示可以匹配滿足條件的任意元素。如：div[id^=section] 表示匹配包含 id 屬性，且 id 屬性值是以 “section” 字符串開頭的 div 元素。
2.E[att$=value] 屬性選擇器
E[att$=value] 屬性選擇器是指選擇器名稱為 E 的標記，且該選擇器定義了 att 屬性，att 屬性值包含后綴為 value 的子字符串。與E[att$=value]選擇器一樣，E元素可以省略，如果省略則表示可以匹配滿足條件的任意元素。如：div[id$=section]表示匹配包含 id 屬性，且 id 屬性值是以 “section” 結尾的 div 元素。
3.E[att*=value] 屬性選擇器
E[att*=value] 選擇器用於選擇名為 E 的標記，且該標記定義了 att 屬性，att 屬性值包含 value 子字符串，該選擇器與前兩個選擇器一樣，E 元素也可以省略，如果省略則表示可以匹配滿足條件的任意元素。如：div[id*=section] 表示匹配包含 id 屬性，且 id 屬性包含 “section” 字符串的 div 元素。
關系選擇器
CSS3中的關系選擇器主要包括子代選擇器和兄弟選擇器，其中子代選擇器由符號 “>” 連接，兄弟選擇器由符號 “+” 和 “~” 連接。
1.子代選擇器（>）
子代選擇器主要用來選擇某個元素的第一級子元素，如希望選擇只作為 h1 元素子元素的 strong 元素，可以寫為：h1 > strong。
2.兄弟選擇器（+、~）
兄弟選擇器用來選擇與某元素位於同一個父元素之中，且位於該元素之后（不會往前選，只會往后選）的兄弟元素。兄弟選擇器分為臨近兄弟選擇器和普通兄弟選擇器兩種。
（1）臨近兄弟選擇器
該選擇器使用加號 “+” 來鏈接前后兩個選擇器，選擇器中的兩個元素有同一個父親，而且第二個元素必須緊跟第一個元素。
（2）普通兄弟選擇器
普通兄弟選擇器使用 “~” 來鏈接前后兩個選擇器。選擇器中的兩個元素有同一個父親，但第二個元素不必緊跟第一個元素（往后選所有的兄弟）。
結構化偽類選擇器
結構化偽類選擇器是 CSS3 中新增加的選擇器，常用的結構化選擇器有 :root 選擇器、:only-child 選擇器、:first-child 選擇器、:last-child 選擇器、:nth-child(n) 選擇器、:nth-last-child(n) 選擇器、:nth-of-type(n) 選擇器、:nth-last-of-type(n) 選擇器、:empty 選擇器、:target 選擇器。
1.:root 選擇器
:root 選擇器用於匹配文檔根元素，在 HTML 中，根元素始終是 html 元素，也就是說使用 “:root 選擇器” 定義樣式，對所有頁面元素都生效。對於不需要該樣式的元素，可以單獨設置樣式進行覆蓋。
給 h2 進行單獨設置：
2.:not 選擇器
如果對某個結構使用樣式，但是想排除這個結構元素下面的子結構元素，讓它不使用這個樣式，可以使用 :not 選擇器。
3.:only-child 選擇器
:only-child 選擇器用於匹配屬於父元素的唯一子元素的元素，也就是說，如果父元素僅有一個子元素，則使用 “:only-child 選擇器” 可以選擇這個子元素。
4.:first-child 和 :last-child 選擇器
:first-child 選擇器和:last-child 選擇器分別用於為父元素中的第一個或者最后一個子元素設置樣式。
5.:nth-child(n) 和 :nth-last-child(n) 選擇器
使用 :nth-child(n) 選擇器和 :nth-last-child(n) 選擇器可以選擇某個父元素中第 n 個或倒數第 n 個子元素。
選擇第 2 個和倒數第 2 個子元素：
選擇第 3 個和倒數第 2 個子元素：
6.:nth-of-type(n) 和 :nth-last-of-type(n) 選擇器
:nth-of-type(n) 選擇器和 :nth-last-of-type(n) 選擇器用於匹配屬於父元素的特定類型的第 n 個子元素和倒數第 n 個子元素。如第2個<p>標簽或倒數第二個<p>標簽。
選擇偶數行的 <h2> 標簽設置為紅色和奇數行的 <p> 標簽設置為綠色：
在前一個基礎上再選擇倒數第 2 個子元素：
選擇偶數行還可用此方法：
7.:empty 選擇器
:empty 選擇器用來選擇沒有子元素或文本內容為空的所有元素。
8.:target 選擇器
:target 選擇器用於為頁面中的某個 target 元素（該元素的 id 被當做頁面中的超鏈接來使用）指定樣式。只有用戶單擊了頁面中的超鏈接，並跳轉到 target 元素后，:target 選擇器所設置的樣式才會起作用。
偽元素選擇器
所謂偽元素，是針對CSS中已經定義好的偽元素使用的選擇器。CSS中常用的偽元素選擇器有 before 偽元素選擇器和 :after 偽元素選擇器。
1.:before 選擇器
:before 偽元素選擇器用於在被選元素的內容前面插入內容，必須配合 content 屬性來指定要插入的具體內容（當前內部前）。基本語法格式如下：
<元素>:before
{
content:文字/url();
}
在前面加上三個哈字：
2.:after 選擇器
:after 偽元素選擇器用於在某個元素后邊插入一些內容（當前內部后），使用方法與 :before 選擇器相同。
偽類鏈接
定義超鏈接時為超鏈接指定不同的狀態，使得超鏈接在點擊前、點擊后和鼠標懸停時的樣式不同。在CSS中，通過鏈接偽類可以實現不同的鏈接狀態。
所謂偽類並不是真正的類，它的名稱是由系統定義的，通常由標記名、類名或 id 名加 ":" 構成。
超鏈接標記<a>的偽類
| 超鏈接標記<a>的偽類 | 含義 |
| a:link{CSS樣式規則；} | 未訪問時超鏈接的狀態 |
| a:visited{CSS樣式規則} | 訪問后超鏈接的狀態 |
| a:hover{CSS樣式規則} | 鼠標經過、懸停時超鏈接的狀態 |
| a:active{CSS樣式規則} | 鼠標點擊不動時超鏈接的狀態 |