深入學習css偽類和偽元素及其用法

前言

CSS的偽類和偽元素在平時的代碼中經常會出現，可是一旦別人問你，什么是偽類，什么是偽元素，可能還是不能完整的表述出來，下面我們來一探究竟。

偽類和偽元素定義

偽類用於在頁面中的元素處於某個狀態時，為其添加指定的樣式。

偽元素會創建一個抽象的偽元素，這個元素不是DOM中的真實元素，但是會存在於最終的渲染樹中，我們可以為其添加樣式。

[重點]最常規的區分偽類和偽元素的方法是：實現偽類的效果可以通過添加類來實現，但是想要實現偽元素的等價效果只能創建實際的DOM節點。

注意偽類使用單冒號 “:” ; 偽元素使用雙冒號 “::”

偽元素

偽元素可以分為排版偽元素、突出顯示偽元素、樹中偽元素三類。

排版偽元素

【::first-line】

設置元素中第一行文本的樣式

注意只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因為first-line中存在連接符的原因

.firstLine::first-line {
    width: 200px;
    text-transform: uppercase;
    background: #f3f3f3;
 }
<p class="firstLine">hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world </p>

hello world hello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello worldhello world

雖然在DOM中看不到，但實際上，上面的這段HTML代碼會通過添加虛擬標簽的方式進行修改。

【::first-letter】

指定一個元素第一個字母的樣式

[注意1]所有前導標點符號應與第一個字母一同應用該樣式

[注意2]只能與塊級元素關聯

[注意3]只有當選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因為first-letter中存在連接符的原因

<style>
.letter{
    width: 200px;
    border: 1px solid black;
    text-indent: 0.5em;
}
.letter:first-letter{
    font-size: 30px;
    float: left;
} 
</style>

<div class="letter">測試首字母下層，測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層</div>

測試首字母下層，測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層測試首字母下層

突出顯示偽元素

突出顯示偽元素表示文檔中特定狀態的部分，通常采用不同的樣式展示該狀態。如頁面內容的選中。突出顯示偽元素不需要在元素樹中有體現，並且可以任意跨越元素邊界而不考慮其嵌套結構。

【::selection】

匹配被用戶選擇的部分

[注意1]firefox瀏覽器需要添加-moz-前綴
[注意2]只支持雙冒號寫法
[注意3]只支持顏色和背景顏色兩個樣式

div::selection{color: red;}

樹中偽元素

【::before & ::after】

::before是在源元素的實際內容前添加偽元素。::after是在源元素的實際內容后添加偽元素。當::before/::after偽元素的content屬性不為'none'時，這兩類偽元素就會生成一個元素，作為源元素的子元素，可以和DOM樹中的元素一樣定義樣式。

[兼容]IE7-瀏覽器不支持
注意默認這個偽元素是行內元素，且繼承元素可繼承的屬性；IE7-瀏覽器中必須聲明!DOCTYPE，否則不起作用

// content = 字符串
.box:after{content:"后綴"}

// content = url
div:before{
    content: url("arrow.gif");
}

// content = attr
<div data-before="把我現在上去"></div>
div:before{
    content: attr(data-before);
}

[特] content的內容可以直接使用 url() 引入圖片

【::marker】

::markder可以用於定義列表項標記的樣式。

<style>
    .item::marker{
        color:green;
    }
</style>

<ul>
 <li class="item">Item 1</li>
 <li class="item">Item 2</li>
 <li class="item">Item 3</li>
 </ul>

• Item 1
• Item 2
• Item 3

該偽元素暫時只有safari支持，嘗試的話請使用safari。可以用於該偽元素的屬性也有限

【::placeholder】

表示輸入框內占位提示文字。可以定義其樣式。

::placeholder {
 color: blue;
}

偽元素速查表

    /* Typographic Pseudo-elements */
    ::first-line            /* 選取文字塊首行字符 */
    ::first-letter          /* 選取文字塊首行首個字符 */

    /* Highlight Pseudo-elements */
    ::selection             /* 選取文檔中高亮(反白)的部分*/
    ::inactive-selection    /* 選取非活動狀態時文檔中高亮(反白)的部分*/
    ::spelling-error        /* 選取被 UA 標記為拼寫錯誤的文本 */
    ::grammar-error         /* 選取被 UA 標記為語法錯誤的文本 */

    /* Tree-Abiding Pseudo-elements */
    ::before                /* 在選中元素中創建一個前置的子節點 */
    ::after                 /* 在選中元素中創建一個后置的子節點 */
    ::marker                /* 選取列表自動生成的項目標記符號 */
    ::placeholder           /* 選取字段的占位符文本(提示信息) */
    
    /* WebVTT Format */
    ::cue                   /* 匹配所選元素中 WebVTT 提示 */

    /* Fullscreen API */
    ::backdrop              /* 匹配全屏模式下的背景 */

偽類

偽類經常與偽元素混淆，偽元素的效果類似於通過添加一個實際的元素才能達到，而偽類的效果類似於通過添加一個實際的類來達到。實際上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的效果將覆蓋 hover active focus

注意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="按鈕">
<label>Male<input type="radio" name="sex" /></label>
<label>Female<input type="radio" name="sex"  /></label>

按鈕可用
按鈕不可用

Male
Female

結構偽類

結構偽類可分為以下3種情況，IE8-瀏覽器不支持

【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             選擇父元素中只包含一個子元素

p:first-child    　　 代表的並不是<p>的第一個子元素，而是<p>元素是某元素的第一個子元素
p > i:first-child    匹配所有<p>元素中的第一個<i>元素
p:first-child i 　　  匹配所有作為第一個子元素的<p>元素中的所有<i>元素

[注]n可以是整數(從1開始)，也可以是公式，也可以是關鍵字(even、odd)

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

【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;} // 當點擊頁面上面的錨點時，錨點到的目標元素會采用這個樣式

【其它】
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

偽類速查表

    /* 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                  /* 打印文檔時右側的樣式 */