首頁 > 開發者 > JavaScript
CSS Pseudo-classes，csspseudo-classes
先來一條金科玉律：
偽類的效果可以通過添加一個實際的類來達到；虛擬元素的效果可以通過添加一個實際的元素來達到。
第一部分，Pseudo-classes，偽類
一、連結系
（這個應該是最熟悉的啦。）
a:link——未訪問的連結
a:visited——已訪問的連結
a:hover——滑鼠懸浮在連結上時的樣式
a:active——滑鼠點選連結時的樣式
上述4種偽類在同時應用到<a>元素時，考慮到樣式的層疊關係，需要按照LoVeHA的順序，否則容易出問題。
二、表單系
input:focus——指定焦點元素的樣式；簡單來說，就是滑鼠游標閃動的那個地方，常用於表單的輸入框。
input:disabled——指定帶有disabled屬性的<input>元素的樣式
input:enabled——指定帶有enabled屬性的<input>元素的樣式
input:checked——指定帶有checked屬性的<input>元素的樣式
input:required——指定帶有required屬性的<input>元素的樣式
input:optional——指定不帶有required屬性的<input>元素的樣式
input:valid——指定帶有有效值的<input>元素的樣式
input:invalid——指定帶有無效值的<input>元素的樣式
input:read-only——指定帶有readonly屬性的<input>元素的樣式
input:read-write——指定不帶有readonly屬性的<input>元素的樣式
input:in-range——假如一個輸入框中指定了最小值和最大值（type="number"/type="range"），當輸入的值在指定的範圍內時，就會應用這個樣式
input:out-of-range——xxxxxx，當輸入的值超出了指定的範圍，就會應用這個樣式。
三、互動系
:hover——理論上能用於所有元素，比如#header:hover，其意思是指，當使用者滑鼠懸浮在id值為header的元素上時，應用指定的樣式。
:active——理論上能用於所有元素，比如#header:active，其意思是指，當使用者滑鼠點擊id值為header的元素時，應用指定的樣式。
:focus——理論上能用於所有能夠被焦點化的元素，多用於表單元素，比如<input>、<textarea>等。
焦點化，通俗地理解，滑鼠點一下，會出現游標（一閃一閃的）。
四、數字系
前方高能，備好紙筆。。。
:first-child
比如 p:first-child，第一步，在任何一個元素中，找到第一個子項目；第二步，這個子項目是不是p元素；如果是，就選它（如果不是，就跳過），然後尋找下一個。
:last-child
尋找最後一個子項目，步驟同上。
:nth-child()
這個偽類可以（必須）指定參數，以p:nth-child()舉例，有以下幾種方式。
提示：參數運算式中n都是從0開始算的。
1. 當參數為一個具體的數字，比如3，p:nth-child(3)；第一步，在任何一個元素中，找到它的第3個子項目；第二步，這個子項目是不是p元素。
當參數為1的時候，即 :nth-child(1)，等同於 :first-child。
有圖才有真相：
CSS如下：
1 p:nth-child(3) {2 color:orange;3 }
頁面效果：
第一幅圖：
第二幅圖：
一切盡在不言中。。。
2. 當參數為2n，那就選擇所有的偶數子項目，等同於even；當參數為2n+1或2n-1，那就選擇所有的奇數子項目，等同於odd；這個在做斑馬線表格的時候經常用。
3. 當參數為n的倍數，比如3n，這個好理解。
4. 當參數為n+具體數字，比如n+3，表示從第3個子項目往後找；因為n從0開始，那麼這個運算式的值就是從3開始，3、4、5。。。這樣子。
5. 當參數為-n+具體數字，比如-n+3，表示從第3個子項目往前找；因為n從0開始，那麼這個運算式的值就是從3開始，然後2、1。。。這樣子。
6. 當參數為具體數字*n+1，比如3n+1，表示從1開始，隔3選一。
實踐中可以根據需要自創運算式，自行發揮吧。
記住兩步，第n個找到了之後，還要看元素類型對不對。
:nth-last-child
接受的參數與 :nth-child()一致，只不過這個要倒過來數。
:nth-of-type()
接受參數，參數類型同上。
比如 p:nth-of-type(3)，先找到所有的p元素，然後找第3個p元素，給它應用樣式。
有圖有真相，請看下面：
CSS代碼：
1 h1:nth-of-type(2) {2 color:blue;3 }4 5 p:nth-of-type(3) {6 color:orange;7 }
下面：
記住兩步，先找元素類型，再找第n個。
:first-of-type——略
:last-of-type——略
:only-child
比如 p:only-child，它表示，父元素中只有唯一一個子項目，而且這個子項目還必須是p元素。
:only-of-type
比如 p:only-of-type，它表示，父元素中有幾個子項目都沒關係，但是p元素只能有一個。
:empty
比如 p:empty，它表示，如果有一個完全空的（連空格都沒有的）p元素，就選它。
兩步，先找完全空的元素，再看是不是p元素。
小發現：
如果html是這樣子的，<p> </p>，中間有空格，在頁面上是沒有這個p元素的位置的；
如果html是這樣的，<p> </p>，中間有一個 ， 在頁面上會顯示一個空白行。
（額。但是不知道這個區別有什麼用。。。）
五、其它
:root——選擇文檔的根項目；在html文檔中，總是<html>元素。
:not()——否定選取器，比如 :not(p)，選擇所有非<p>元素。
:target——語言匱乏，暫且不表；一個很神奇的偽類。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
