前面的話
偽類經常與偽元素混淆，偽元素的效果類似于通過添加一個實際的元素才能達到，而偽類的效果類似于通過添加一個實際的類來達到。實際上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>
文章列表
留言列表
