前面的話
偽類經常與偽元素混淆，偽元素的效果類似於通過新增一個實際的元素才能達到，而偽類的效果類似於通過新增一個實際的類來達到。實際上css3為了區分兩者，已經明確規定了偽類用一個冒號來表示，而偽元素則用兩個冒號來表示。本文將詳細介紹偽類的詳細知識
錨點
關於錨點<a>，有常見的5個偽類，分別是:link,:hover,:active,:focus,:visited
a:link{background-color:pink;}/*品紅，未訪問*/
a:hover{background-color:lightblue;}/*淺藍，滑鼠懸停*/
a:active{background-color:lightgreen;}/*淺綠，正被點選*/
a:focus{background-color:lightgrey;}/*淺灰，擁有焦點*/
a:visited{color:orange;}/*字型顏色為橙色，已被訪問*/
/*[注意]visited偽類只能設定字型顏色、邊框顏色、outline顏色的樣式*/
偽類順序
對於偽類順序，有一個口訣是love-hate，代表著偽類的順序是link、visited、focus、hover、active。但是否偽類的順序只能如此呢？為什麼是這個順序呢？
CSS層疊中有一條法則十分重要，就是後面覆蓋前面，所以偽類的順序是需要精心考慮的。
【1】link和visited必須在最前面，且沒有先後順序，否則link或visited的效果將被覆蓋
[注意]link和visited稱為靜態偽類，只能應用於超連結
【2】hover、active、focus這三個偽類必須是focus、hover、active的順序，因為在focus狀態下，也需要觸發hover和active，而要觸發active一定要先觸發hover，所以active要放在hover後面
[注意]hover、active、focus稱為動態偽類，可應用於任何元素，但IE7-瀏覽器不支援:focus，:hover和:active在IE6-瀏覽器下只支援給<a>設定
所以最終的順序只有兩種:link、visited、focus、hover、active或visited、link、focus、hover、active
a:link{background-color:pink;}/*品紅，未訪問*/
a:visited{color:orange;}/*字型顏色為橙色，已被訪問*/
a:focus{background-color:lightgrey;}/*淺灰，擁有焦點*/
a:hover{background-color:lightblue;}/*淺藍，滑鼠懸停*/
a:active{background-color:lightgreen;}/*淺綠，正被點選*/
UI元素偽類
UI元素偽類包括:enabled、:disabled、:checked三個，主要針對於HTML中的form元素，IE8-瀏覽器不支援
:enabled 可用狀態 :disabled 不可用狀態 :checked 選中狀態
input:enabled{ border: 1px solid black; background-color: transparent; } input:disabled{ border: none; background-color: gray; } input:checked{ outline: 2px solid lightblue; }
<button onclick = "btn.disabled = false;">按鈕可用</button>
<button onclick = "btn.disabled = true;">按鈕不可用</button>
<input type="button" id="btn" value="按鈕">
<br> <label>Male<input type="radio" name="sex" /></label>
<label>Female<input type="radio" name="sex" /></label>
[注意]input和:和enabled之間都不可以有空格
結構偽類
結構偽類可分為以下3種情況，IE8-瀏覽器不支援
//以下情況都是E為父元素，F為子元素
【1】:nth-child(n)、:nth-last-child(n)、first-child、last-child、:only-child
E F:nth-child(n) 選擇父元素的第n個子元素
E F:nth-last-child(n) 選擇父元素的倒數第n個子元素
E F:first-child 父元素的第一個子元素，與E F:nth-child(1)等同
E F:last-child 父元素的最後一個子元素，與E F:nth-last-child(1)等同
E F:only-child 選擇父元素中只包含一個子元素
[注意]:first-child和:last-child只有IE6-瀏覽器不支援
n可以是整數(從1開始)，也可以是公式，也可以是關鍵字(even、odd)
p:first-child 代表的並不是<p>的第一個子元素，而是<p>元素是某元素的第一個子元素 p > i:first-child 匹配所有<p>元素中的第一個<i>元素 p:first-child i 匹配所有作為第一個子元素的<p>元素中的所有<i>元素
li:nth-child(odd){color: red;} li:nth-last-child(3){color: green;} li:first-child{color: blue;} li:last-child{color: yellow;} div:only-child{background-color:lightgrey;}
<ul> <li><div>第一個DIV</div></li> <li><div>第二個DIV</div></li> <li><div>第三個DIV</div></li> <li><div>第四個DIV</div></li> <li><div>第五個DIV</div></li> <li><div>第六個DIV</div></li> </ul>
【2】:nth-of-type(n)、:nth-last-of-type(n)、:first-of-type、:last-of-type、:only-of-type
E F:nth-of-type(n) 選擇父元素的具有指定型別的第n個子元素
E F:nth-last-of-type(n) 選擇父元素的具有指定型別的倒數第n個子元素
E F:first-of-type 選擇父元素中具有指定型別的第1個子元素，與E F:nth-of-type(1)相同
E F:last-of-type 選擇父元素中具有指定型別的最後1個子元素，與E F:nth-last-of-type(1)相同
E F:only-of-type 選擇父元素中只包含一個同型別的子元素
.box div:nth-of-type(even){color: red;}
.box p:nth-last-of-type(3){color: green;}
.box div:first-of-type{color: blue;}
.box p:last-of-type{color: yellow;}
.box div:only-of-type{color: pink;}
<div class="box"> <div>第一個div</div> <p>第一個p</p> <div>第二個div</div> <p>第二個p</p> <div class="in">第三個div</div> <p>第三個p</p> </div> <div class="box"> <div>第四個div</div> </div>
【3】:root、:not、:empty、:target
:root 選擇文件的根元素
:not 選擇除某個元素之外的所有元素
:empty 選擇沒有子元素的元素，而且該元素也不包含任何文字節點
:target 匹配錨點對應的目標元素
[注意]:not選擇器常用於導航之間的豎線處理，如li:not(:last-of-type)
:root{color:red;} div:not{background-color: lightgrey;} p:empty{height:30px;width:30px;background:pink;} :target{color:blue;}
<body>
<a href="#test">測試</a>
<div>第一個div</div>
<p>第一個p</p>
<div id="test">第二個div</div>
<p>第二個p</p>
<p></p>
</body>
其他
【1】:lang() 匹配某個語言，IE7-瀏覽器不支援
p:lang(en) 匹配語言為"en"的<p>
【2】不僅可以使用單一偽類，也可以偽類結合使用
[注意]順序無關
div:hover:first-child{background-color: lightgreen;} div:last-of-type:active{background-color: lightblue;}
<div>第一個div</div> <div>第二個div</div>
速查表
下面是偽類的速查表
/* Logical Combinations */ :matches() /*:any()*/ /* 匹配 集合內指定 的元素 */ :not() /* 排除 滿足指定關係 的元素 */ :has() /* 匹配 滿足指定關係 的元素*/ /* Linguistic Pseudo-classes */ :dir() /* 匹配 設定dir(文字書寫方向)屬性 的元素 */ :lang() /* 匹配 設定lang(定義元素語言)屬性 的元素 */ /* Location Pseudo-classes */ :any-link /* 匹配 任意有連結錨點 的元素*/ :link /* 匹配 未處於訪問記錄中 的連結 */ :visited /* 匹配 處於訪問記錄中 的連結 */ :target /* 匹配 URL指向的錨點 的元素 */ :scope /* 匹配 設定scoped屬性的style標籤 的作用域 */ /* User Action Pseudo-classes */ :hover /* 匹配 處於滑鼠懸停狀態 的元素 */ :active /* 匹配 處於啟用狀態 的元素 */ :focus /* 匹配 處於聚焦狀態 的元素 */ :focus-ring /* 匹配 處於聚焦狀態元素 的UA樣式(聚焦輪廓) */ :focus-within /* 匹配 子節點處於聚焦狀態 的元素 */ :drop /* 匹配 處於拖拽狀態 的元素 */ :drop() /* 匹配 處於指定拖拽狀態 的元素 */ /* Time-dimensional Pseudo-classes */ :current /* 匹配 處於當前狀態 的定義了timeline屬性的元素 */ :past /* 匹配 處於過去狀態 的定義了timeline屬性的元素 */ :future /* 匹配 處於將來狀態 的定義了timeline屬性的元素 */ /* Resource State Pseudos */ :playing /* 匹配 處於播放狀態 的元素 */ :paused /* 匹配 處於暫停狀態 的元素 */ /* The Input Pseudo-classes */ :enabled /* 匹配 可以編輯 的元素 */ :disabled /* 匹配 禁止編輯 的元素 */ :read-only /* 匹配 內容只讀 的元素 */ :read-write /* 匹配 內容可編輯 的元素 */ :placeholder-shown /* 匹配 顯示欄位佔位符文字 的元素 */ :default /* 匹配 頁面載入預設選中 的元素 */ :checked /* 匹配 選中狀態 的元素 */ :indeterminate /* 匹配 模糊狀態 的元素 */ :valid /* 匹配 輸入內容通過型別驗證 的元素 */ :invalid /* 匹配 輸入內容無法通過型別驗證 的元素 */ :in-range /* 匹配 輸入數值符合範圍 的元素 */ :out-of-range /* 匹配 輸入數值溢位範圍 的元素 */ :required /* 匹配 設定必填屬性 的元素 */ :optional /* 匹配 可選欄位 的元素 */ :user-invalid /* 匹配 使用者輸入內容未通過驗證 的元素 */ /* Tree-Structural pseudo-classes */ :root /* 匹配 文件樹 的根元素*/ :empty /* 匹配 無子節點 的元素 */ :blank /* 匹配 僅包含空格或者換行符 的元素 */ :nth-child(n) /* 匹配 符合元素集合中指定位置 的元素 */ :nth-last-child(n) /* 反序匹配 符合元素集合內指定位置 的元素 */ :first-child /* 匹配 符合元素集合內首個 的元素 */ :last-child /* 匹配 符合元素集合內末尾 的元素 */ :only-child /* 匹配 無兄弟節點 的元素 */ :nth-of-type(n) /* 匹配 符合元素集合中同型別指定位置 的元素 */ :nth-last-of-type(n) /* 反序匹配 符合元素集合中同型別指定位置 的元素 */ :first-of-type /* 匹配 每個在元素集合中初次出現 的元素 */ :last-of-type /* 匹配 每個在元素集合中末次出現 的元素 */ :only-of-type /* 匹配 無同類兄弟節點 的元素*/ /* Fullscreen API */ :fullscreen /* 匹配 全屏顯示模式中 的元素 */ /* Page Selectors */ :first /* 列印文件時首頁的樣式 */ :left /* 列印文件時左側的樣式 */ :right /* 列印文件時右側的樣式 */