[CSS快速入門（二）]
偽類選擇器
簡介
偽類是選擇器的一種，它用於選擇處於特定狀態的元素，比如當它們是這一類型的第一個元素時，或者是當鼠標指針懸浮在元素上面的時候。它們表現得會像是你向你的文檔的某個部分應用了一個類一樣，幫你在你的標記文本中減少多余的類，讓你的代碼更靈活、更易於維護；
偽類就是開頭為冒號的關鍵字：
:pseudo-class-name
偽類示例
/*css代碼*/
.first {
font-size: 120%;
font-weight: bold;
}
<!--HTML代碼-->
<article>
<p class="first">Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
如果想修改的是第一段的話，並不是通過類選擇器去匹配修改，可以使用
:first-child偽類選擇器，這將一直選中文章中的第一個子元素，我們將不再需要編輯HTML（編輯HTML並不總是可行，也許是因為它是由一個CMS生成的）；
/*css*/
article p:first-child {
font-size: 120%;
font-weight: bold;
}
<!--html-->
<article>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
用戶行為偽類
一些偽類只會在用戶以某種方式和文檔交互的時候應用。這些用戶行為偽類，有時叫做動態偽類，表現得就像是一個類在用戶和元素交互的時候加到了元素上一樣。案例包括：
:hover：只會在用戶將指針挪到元素上的時候才會激活，一般就是鏈接元素；:focus：只會在用戶使用鍵盤控制，選定元素的時候激活；
:hover示例
<!--css-->
a:hover{
color:red;
}
<!--html-->
<div><a href="http://www.baidu.com" >百度</a></div>
:focus示例
<!--css-->
input:focus {
background-color: red;
}
<!--html-->
INPUT:<input type="text">
偽元素
偽元素以類似方式表現，不過表現得是像你往標記文本中加入全新的HTML元素一樣，而不是向現有的元素上應用類。偽元素開頭為雙冒號::；
語法：
::pseudo-element-name
注意一些早期的偽元素曾使用單冒號的語法，所以你可能會在代碼或者示例中看到。現代的瀏覽器為了保持后向兼容，支持早期的帶有單雙冒號語法的偽元素；
簡單示例
例如，如果你想選中一段的第一行，你可以把它用一個
<span>元素包起來，然后使用元素選擇器；不過，如果包起來的單詞/字符數目長於或者短於父元素的寬度，這樣做會失敗。由於我們一般不會知道一行能放下多少單詞/字符——因為屏幕寬度或者字體大小改變的時候這也會變——通過改變HTML的方式來可預測地這么做是不可能的；
::first-line偽元素選擇器能做到這件事——即使單詞/字符的數目改變，它也只會選中第一行；
article p::first-line {
font-size: 120%;
font-weight: bold;
}
<article>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
偽元素選擇器其他參數
首字調整、文本前/后添加渲染文本
首字調整文本前后添加渲染文本)
調整第一個字
<style>
p#d1:first-letter{
font-size: 48px;
color: #af2c2c;
}
p#d2:before{
content:'Hammer';
color: chocolate;
}
p#d3:after{
content: '兩袖清風';
color: dodgerblue;
}
</style>
<body>
<p id="d1">Hammer is very good！</p>
<p id="d2">心態擺平</p>
<p id="d3">為人端正</p>
<hr>
</body>
偽類參考表
偽類
| 選擇器 | 描述 |
|---|---|
:active |
在用戶激活（例如點擊）元素的時候匹配。 |
:any-link |
匹配一個鏈接的:link和:visited狀態。 |
:blank |
匹配空輸入值的``元素。 |
:checked |
匹配處於選中狀態的單選或者復選框。 |
:current (en-US) |
匹配正在展示的元素，或者其上級元素。 |
:default |
匹配一組相似的元素中默認的一個或者更多的UI元素。 |
:dir |
基於其方向性（HTMLdir屬性或者CSSdirection屬性的值）匹配一個元素。 |
:disabled |
匹配處於關閉狀態的用戶界面元素 |
:empty |
匹配除了可能存在的空格外，沒有子元素的元素。 |
:enabled |
匹配處於開啟狀態的用戶界面元素。 |
:first |
匹配分頁媒體的第一頁。 |
:first-child |
匹配兄弟元素中的第一個元素。 |
:first-of-type |
匹配兄弟元素中第一個某種類型的元素。 |
:focus |
當一個元素有焦點的時候匹配。 |
:focus-visible |
當元素有焦點，且焦點對用戶可見的時候匹配。 |
:focus-within |
匹配有焦點的元素，以及子代元素有焦點的元素。 |
:future (en-US) |
匹配當前元素之后的元素。 |
:hover |
當用戶懸浮到一個元素之上的時候匹配。 |
:indeterminate |
匹配未定態值的UI元素，通常為復選框。 |
:in-range |
用一個區間匹配元素，當值處於區間之內時匹配。 |
:invalid |
匹配諸如<input>的位於不可用狀態的元素。 |
:lang |
基於語言（HTMLlang屬性的值）匹配元素。 |
:last-child |
匹配兄弟元素中最末的那個元素。 |
:last-of-type |
匹配兄弟元素中最后一個某種類型的元素。 |
:left |
在分頁媒體 (en-US)中，匹配左手邊的頁。 |
:link |
匹配未曾訪問的鏈接。 |
:local-link (en-US) |
匹配指向和當前文檔同一網站頁面的鏈接。 |
:is() |
匹配傳入的選擇器列表中的任何選擇器。 |
:not |
匹配作為值傳入自身的選擇器未匹配的物件。 |
:nth-child |
匹配一列兄弟元素中的元素——兄弟元素按照an+b形式的式子進行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇數個）。 |
:nth-of-type |
匹配某種類型的一列兄弟元素（比如，<p>元素）——兄弟元素按照an+b形式的式子進行匹配（比如2n+1匹配元素1、3、5、7等。即所有的奇數個）。 |
:nth-last-child |
匹配一列兄弟元素，從后往前倒數。兄弟元素按照an+b形式的式子進行匹配（比如2n+1匹配按照順序來的最后一個元素，然后往前兩個，再往前兩個，諸如此類。從后往前數的所有奇數個）。 |
:nth-last-of-type |
匹配某種類型的一列兄弟元素（比如，<p>元素），從后往前倒數。兄弟元素按照an+b形式的式子進行匹配（比如2n+1匹配按照順序來的最后一個元素，然后往前兩個，再往前兩個，諸如此類。從后往前數的所有奇數個）。 |
:only-child |
匹配沒有兄弟元素的元素。 |
:only-of-type |
匹配兄弟元素中某類型僅有的元素。 |
:optional |
匹配不是必填的form元素。 |
:out-of-range |
按區間匹配元素，當值不在區間內的的時候匹配。 |
:past (en-US) |
匹配當前元素之前的元素。 |
:placeholder-shown |
匹配顯示占位文字的input元素。 |
:playing (en-US) |
匹配代表音頻、視頻或者相似的能“播放”或者“暫停”的資源的，且正在“播放”的元素。 |
:paused (en-US) |
匹配代表音頻、視頻或者相似的能“播放”或者“暫停”的資源的，且正在“暫停”的元素。 |
:read-only |
匹配用戶不可更改的元素。 |
:read-write |
匹配用戶可更改的元素。 |
:required |
匹配必填的form元素。 |
:right |
在分頁媒體 (en-US)中，匹配右手邊的頁。 |
:root |
匹配文檔的根元素。 |
:scope |
匹配任何為參考點元素的的元素。 |
:valid |
匹配諸如<input>元素的處於可用狀態的元素。 |
:target |
匹配當前URL目標的元素（例如如果它有一個匹配當前URL分段的元素）。 |
:visited |
匹配已訪問鏈接。 |
偽元素參考表
偽元素
| 選擇器 | 描述 |
|---|---|
::after |
匹配出現在原有元素的實際內容之后的一個可樣式化元素。 |
::before |
匹配出現在原有元素的實際內容之前的一個可樣式化元素。 |
::first-letter |
匹配元素的第一個字母。 |
::first-line |
匹配包含此偽元素的元素的第一行。 |
::grammar-error |
匹配文檔中包含了瀏覽器標記的語法錯誤的那部分。 |
::selection |
匹配文檔中被選擇的那部分。 |
::spelling-error |
匹配文檔中包含了瀏覽器標記的拼寫錯誤的那部分。 |