深刻學習css僞類和僞元素及其用法

時間 2019-11-18

標籤深刻學習 css 元素及其用法欄目 CSS 简体版

原文原文鏈接

前言

CSS的僞類和僞元素在平時的代碼中常常會出現，但是一旦別人問你，什麼是僞類，什麼是僞元素，可能仍是不能完整的表述出來，下面咱們來一探究竟。css

僞類和僞元素定義

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

僞元素會建立一個抽象的僞元素，這個元素不是DOM中的真實元素，可是會存在於最終的渲染樹中，咱們能夠爲其添加樣式。瀏覽器

[重點]最常規的區分僞類和僞元素的方法是：實現僞類的效果能夠經過添加類來實現，可是想要實現僞元素的等價效果只能建立實際的DOM節點。測試

注意僞類使用單冒號「:」 ; 僞元素使用雙冒號「::」字體

僞元素

僞元素能夠分爲排版僞元素、突出顯示僞元素、樹中僞元素三類。ui

排版僞元素

【::first-line】url

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

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

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

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

【其它】
一、:lang() 匹配某個語言，IE7-瀏覽器不支持

p:lang(en) 匹配語言爲"en"的<p>

二、不只可使用單一僞類，也能夠僞類結合使用
注意順序無關

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