CSS偽類

標籤：java

偽類經常與虛擬元素混淆，虛擬元素的效果類似於通過添加一個實際的元素才能達到，而偽類的效果類似於通過添加一個實際的類來達到。實際上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    選中狀態

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

input:enabled{    border: 1px solid black;    background-color: transparent;}input:disabled{    border: none;    background-color: gray;}input:checked{    outline: 2px solid lightblue;}

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

按鈕可用按鈕不可用Male Female

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

　　[注意]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;}

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<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>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

【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;}

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<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>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

【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;}

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

<body>    <a href="#test">測試</a>    <div>第一個div</div>    <p>第一個p</p>    <div id="test">第二個div</div>    <p>第二個p</p>    <p></p>    </body>

650) this.width=650;" src="/img/fz.gif" alt="複製代碼" style="margin:0px;float:left;border:none;" />

 

其他

【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>

CSS偽類