1、僞選擇器
僞選擇器主要包含兩部分：僞類和僞元素
2、僞類
希望在特定狀態下，給元素呈現特定的樣式。比如：超鏈接，在鏈接被點擊之後，呈現特定的樣式，我們就可以使用
:visited這個僞類給超鏈接添加特定的樣式。
僞類的前綴是一個冒號
:
– 分類–
2-1、狀態僞類
| 選擇器 | 示例 | 說明 |
|---|---|---|
| :link | a:link | 選擇所有未訪問的鏈接 |
| :visited | a:visited | 選擇所有訪問過的鏈接 |
| :hover | a:hover | 鼠標懸浮在鏈接上的狀態 |
| :active | a:active | 選擇在激活狀態的鏈接 |
| :focus | input:focus | 選擇獲取焦點的輸入框元素 |
2-2、結構化僞類
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :first-child | :first-child | 選擇p元素的第一個子元素 |
| :first-of-type | p:first-of-type | 選擇每個父元素是p元素的第一個p子元素 |
| :last-child | p:last-child | 選擇所有p元素的最後一個子元素 |
| :last-of-type | p:last-of-type | 選擇每個p元素是其母元素的最後一個p元素 |
| :not(selector) | :not§ | 選擇所有p以外的元素 |
| :nth-child(n) | p:nth-child(2) | 選擇所有p元素的第二個子元素 |
| :nth-last-child(n) | p:nth-last-child(2) | 選擇所有p元素倒數的第二個子元素 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 選擇所有p元素倒數的第二個爲p的子元素 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇所有p元素第二個爲p的子元素 |
| :only-of-type | p:only-of-type | 選擇所有僅有一個子元素爲p的元素 |
| :only-child | p:only-child | 選擇所有僅有一個子元素的p元素 |
| :target | #news:target | 選擇當前活動#news元素(點擊URL包含錨的名字) |
2-3、表單僞類
| 選擇器 | 示例 | 示例說明 |
|---|---|---|
| :disabled | input:disabled | 選擇所有禁用的表單元素 |
| :enabled | input:enabled | 選擇沒有設置 disabled 屬性的表單元素 |
| :required | input:required | 選擇設置 required 屬性的表單元素 |
| :read-only | input:read-only | 選擇設置 readonly 只讀屬性的元素 |
| :read-write | input:read-write | 選擇處於編輯狀態的元素；input，textarea 和設置 contenteditable 的 HTML 元素獲取焦點時即處於編輯狀態。 |
| :checked | input:checked | 匹配被選中的 input 元素，input 元素包括 radio 和 checkbox |
| :empty | p:empty | 匹配所有沒有子元素的 p 元素 |
| :in-range | input:in-range | 選擇在指定區域內的元素 |
| :out-of-range | input:out-of-range | 選擇不在指定區域內的元素 |
| :valid | input:valid | 選擇條件驗證正確的表單元素 |
| :invalid | input:invalid | 選擇條件驗證錯誤的表單元素 |
| :optional | input:optional | 選擇沒有 required 屬性，即設置 optional 屬性的表單元素 |
| :default | - | 匹配默認選中的元素(提交按鈕總是表單的默認按鈕)。 |
| :indeterminate | - | 當某組中的單選框或複選框還沒有選取狀態時，:indeterminate 匹配該組中所有的單選框或複選框。 |
| :scope | - | 匹配處於 style 作用域下的元素。當 style 沒有設置 scope 屬性時，style 內的樣式會對整個 html 起作用。(試驗階段) |
3、僞元素
僞元素和僞類的用法類似，只不過僞元素的前綴是兩個冒號
::，個別元素可以使用一個冒號
–分類–
3-1、單雙冒號
| 選擇器 | 作用 | 說明 |
|---|---|---|
| ::before/:before | 在被選元素前插入內容。 | 需要使用 content 屬性來指定要插入的內容。被插入的內容實際上不在文檔樹中。 |
| ::after/:after | 在選被元素後插入內容 | 其用法和特性與:before相似。 |
| ::first-letter/:first-letter | 匹配元素中文本的首字母。 | 被修飾的首字母不在文檔樹中。 |
| ::first-line/:first-line | 匹配元素中第一行的文本。 | 這個僞元素只能用在塊元素中，不能用在內聯元素中。 |
3-2、雙冒號
| 選擇器 | 作用 | 說明 |
|---|---|---|
| ::selection | 匹配被用戶選中或者處於高亮狀態的部分. | 在火狐瀏覽器使用時需要添加 -moz 前綴。 |
| ::placeholder | 匹配佔位符的文本。 | 只有元素設置了 placeholder 屬性時，該僞元素才能生效。 |
::placeholder:該僞元素不是 CSS 的標準，它的實現可能在將來會有所改變，所以要決定使用時必須謹慎。在一些瀏覽器中（IE10 和 Firefox18 及其以下版本）會使用單冒號的形式。
::backdrop:用於改變全屏模式下的背景顏色。全屏模式的默認顏色爲黑色。(試驗階段)