CSS 偽類、偽元素

偽類選擇器（Pseudo-classes）

  • css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說，偽類和偽元素是用來修飾不在文檔樹中的部分，比如，一句話中的第一個字母，或者是列表中的第一個元素
  • 偽類用于 當(dāng)已有元素處于某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的。比如說，當(dāng)用戶懸停在指定的元素時，我們可以通過:hover來描述這個元素的狀態(tài)。雖然它和普通的css類相似，可以為已有的元素添加樣式，但是它只有處于dom樹無法描述的狀態(tài)下才能為元素添加樣式，所以將其稱為偽類
  • 注意：
    • 偽類名稱對大小寫不敏感

狀態(tài)偽類

/* 靜態(tài)偽類（只能應(yīng)用于超鏈接） */
a:link {background-color: pink;} /* 選擇未訪問的鏈接 */
a:visited {color: orange;} /* 選擇已訪問的鏈接 */
/* visited 偽類只能設(shè)置字體顏色的樣式 */
/* link 以及 visited 這兩個偽類只能應(yīng)用于超鏈接 */


/* 動態(tài)偽類（可應(yīng)用于任何元素） */
a:focus {background-color: lightgrey;} /* 擁有焦點(diǎn)時 */ 
a:hover {background-color: lightblue;} /* 選擇鼠標(biāo)指針浮動在其上的元素 */
a:active {background-color: lightgreen;} /* 選擇活動的鏈接。正被點(diǎn)擊，即手指未松開，即還未跳轉(zhuǎn)到新頁面 */
/* IE7-瀏覽器不支持 :focus、:hover和 :active。在IE6-瀏覽器下只支持給<a>設(shè)置 */

/* 不僅可以使用單一偽類，也可以偽類結(jié)合使用 */
a:visited:hover:first-child {color: red;}
/* 注意：順序無關(guān) */

/* 偽類順序 */
/*
對于偽類順序，有一個口訣是 love-hate
代表著偽類的順序是 link、visited、focus、hover、active。
但是否偽類的順序只能如此呢？為什么是這個順序呢？

link 和 visited 必須在最前面，且沒有先后順序，否則 link 或 visited 的效果將被覆蓋

hover、active、focus 這三個偽類必須是 focus、hover、active 的順序 
因?yàn)樵?focus 狀態(tài)下，也需要觸發(fā) hover 和 active，而要觸發(fā) active 一定要先觸發(fā) hover，所以 active 要放在 hover 后面

所以最終的順序只有兩種：link、visited、focus、hover、active 或 visited、link、focus、hover、active
*/

結(jié)構(gòu)化偽類

否定選擇器（IE8-不支持）
:not()  選擇器匹配不符合參數(shù)的元素，參數(shù)可以是 元素／選擇器?？梢院唵卫斫鉃椋壕退鼪]有，其余都有
語法格式： 父元素:not(子元素／子選擇器)   Father:not(Children/selector)
*/
/* nav直接子元素中，最后一個a類型元素不應(yīng)用此樣式 */
nav > a:not(:last-of-type) {
    border-right: 1px solid red;
}


/* 結(jié)構(gòu)偽類（IE8-瀏覽器不支持） */
以下情況都是E為父元素，F(xiàn)為子元素：
E F:nth-child(n) 選擇父元素的第n個子元素，第一個編號為 1
E F:nth-last-child(n) 選擇父元素的倒數(shù)第n個子元素，倒數(shù)第一個編號為 1
E F:first-child（IE6-不支持）父元素的第一個子元素,且該子元素是F，與 E F:nth-child(1) 等同
E F:last-child （IE6-不支持） 父元素的最后一個子元素，且該子元素是F，與 E F:nth-last-child(1) 等同
E F:only-child    選擇父元素中只包含一個子元素，且該子元素是F

E F:nth-of-type(n) 選擇父元素的具有指定類型的第n個子元素
E F:nth-last-of-type(n) 選擇父元素的具有指定類型的倒數(shù)第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  選擇父元素中只包含一個同類型的子元素，子元素是F

注意：n可以是整數(shù)（從0開始），也可以是公式，也可以是關(guān)鍵字（even 偶數(shù)項、odd 奇數(shù)項）
比如：
Element.nth-child(n)  這里n就是一個簡單表達(dá)式，取值從“0”開始計算。這里只能是小寫字母“n”，不能用其它字母代替
也可以使用比如 2n + 1、3n + 1 等公式來達(dá)到我們想要的效果。注意：不能使用乘法 *，比如 n * n

實(shí)例：
p:first-child    代表的并不是<p>的第一個子元素，而是<p>元素是某元素的第一個子元素
p > i:first-child    匹配所有<p>元素中的第一個子元素，如果是 i 元素，則應(yīng)用樣式 
p:first-child i 匹配所有作為第一個子元素的<p>元素中的所有<i>元素
*/
/* first-child 與 first-of-type 的比較：*/
    <style type="text/css">
        /* 先把所有子元素集中，再數(shù)，如果恰好也是 div 類型，則運(yùn)用樣式 */
        div > div:first-child {
            color: #f00;  /* 紅色 */    
        }

        /* 先把 p 類型集中，再數(shù) */
        div > p:first-of-type {
            color: #00f;  /* 藍(lán)色 */
        }
    </style>
</head>
<body>
<div>
    <div>第一個div中第一個元素</div>
    <p>第一個div中的第一個p類型，但不是第一個元素</p>
</div>
<hr>
<div>
    <p>第二個div中的第一個p類型，也是第一個元素</p>
    <div>第二個div中第二個元素</div>
</div>
</body>


:target 當(dāng)URL帶有錨名稱，指向文檔內(nèi)某個具體的元素時，:target 匹配該元素（IE8-不支持）

表單相關(guān)偽類

/* UI元素偽類包括 :enabled、:disabled、:checked 三個，主要針對于HTML中的  form 元素（IE8-瀏覽器不支持） */
input:enabled {color: #ccc;}  /* 匹配沒有設(shè)置 disabled 屬性的表單元素 */  input:disabled {color: red;}  /* 匹配禁用的表單元素 */
input:checked {color: green;} /* 匹配被選中的input元素，這個input元素包括radio和checkbox） */


:default 匹配默認(rèn)選中的元素

E:empty 匹配沒有子元素的元素。如果元素中含有文本節(jié)點(diǎn)、HTML元素或者一個空格，則 :empty 不能匹配這個元素。


:in-range 匹配在指定區(qū)域內(nèi)元素
input[type=number]:in-range {
        border: 1px solid green;   /* 當(dāng)數(shù)字選擇器的數(shù)字在5到10是，其邊框變?yōu)橹付邮?*/
}
<input type="number" min="5" max="10">


:out-of-range 與 :in-range 相反，它匹配不在指定區(qū)域內(nèi)的元素


:indeterminate
indeterminate 的英文意思是“不確定的”。當(dāng)某組中的單選框或復(fù)選框還沒有選取狀態(tài)時，:indeterminate 匹配該組中所有的單選框或復(fù)選框


:valid  匹配條件驗(yàn)證正確的表單元素

 
:invalid  與 :valid 相反，匹配條件驗(yàn)證錯誤的表單元素


:optional  匹配是具有 optional 屬性的表單元素。當(dāng)表單元素沒有設(shè)置為 required 時，即為 optional 屬性


:required  與 :optional 相反匹配設(shè)置了 required 屬性的表單元素


:read-only  匹配設(shè)置了只讀屬性的元素，表單元素可以通過設(shè)置“readonly”屬性來定義元素只讀


:read-write  匹配處于編輯狀態(tài)的元素。input，textarea 和設(shè)置了contenteditable 的HTML元素獲取焦點(diǎn)時即處于編輯狀態(tài)


:scope（處于試驗(yàn)階段）匹配處于 style 作用域下的元素。當(dāng) style 沒有設(shè)置 scope 屬性時，style 內(nèi)的樣式會對整個 html 起作用
注：目前支持這個偽類的瀏覽器只有火狐

語言相關(guān)偽類

:dir（處于實(shí)驗(yàn)階段）
:dir 匹配指定閱讀方向的元素，當(dāng)HTML元素中設(shè)置了 dir 屬性時該偽類才能生效。
現(xiàn)時支持的閱讀方向有兩種：ltr（從左往右）和rtl（從右往左）。
目前，只有火狐瀏覽器支持 :dir 偽類，并在火狐瀏覽器中使用時需要添加前綴( -moz-dir() )。
 
 
:lang 匹配設(shè)置了特定語言的元素（IE7-不支持）
設(shè)置特定語言可以通過為HTML元素設(shè)置 lang=“” 屬性，設(shè)置 meta 元素的 charset=“” 屬性，或者是在 http 頭部上設(shè)置語言屬性。
實(shí)際上，lang=“”屬性不只可以在html標(biāo)簽上設(shè)置，也可以在其他的元素上設(shè)置

其它偽類

:root 匹配文檔的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素則可能是其他元素


:fullscreen  匹配處于全屏模式下的元素。
全屏模式不是通過按F11來打開的全屏模式，而是通過Javascript的 Fullscreen API 來打開的，不同的瀏覽器有不同的 Fullscreen API。
目前，:fullscreen 需要添加前綴才能使用


新增偽類  :focus-within  匹配當(dāng)前獲得焦點(diǎn)的目標(biāo)元素

偽類應(yīng)用示例

  • 自定義 checkbox（這里是點(diǎn)擊進(jìn)行笑臉切換）
    <style type="text/css">
    input[type="checkbox"] {
        /* 默認(rèn)樣式是一個小方框，控制小方框是否出現(xiàn) */
        -webkit-appearance: none;
        appearance: none;

        /* input 本身就屬于 inline-block 元素，可以直接設(shè)置 寬高 */
        width: 20px;
        height: 20px;

        /* 去除點(diǎn)擊后產(chǎn)生的輪廓 */
        outline: none;  
        vertical-align: middle;
        background: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/b6dcd011-23cc-4d95-9e51-9f10100103bd.png) 0 0/contain no-repeat;
    }

    input[type="checkbox"]:checked {
        background-image: url(http://7xpvnv.com2.z0.glb.qiniucdn.com/538f26f0-6f3e-48d5-91e6-5b5bb730dd19.png);
    }
    </style>
</head>
<body>
今天的心情：<input type="checkbox" name="mood" value="bad">
</body>

偽元素選擇器（Pseudo-elements）

  • 偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before來在一個元素前增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中
/* 在CSS3中，為了區(qū)分偽類選擇器和偽元素選擇器，偽元素選擇器前用兩個冒號 */

/* 用法： */
/* ::first-letter 匹配元素中文本的 首字母／第一個文字。被修飾的 首字母／第一個文字 不在文檔樹中 */
div::first-letter {color: red;}  
/* 所有前導(dǎo)標(biāo)點(diǎn)符號應(yīng)與第一個字母一同應(yīng)用該樣式 */
/* 只能與塊級元素關(guān)聯(lián) */
/* 只有當(dāng)選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因?yàn)?first-letter 中存在連接符的原因 */


/* ::first-line 匹配元素中第一行的文本。這個偽元素只能用在塊元素中，不能用在內(nèi)聯(lián)元素中 */
div::first-line {color: green;}
/* 只有當(dāng)選擇器部分和左大括號之間有空格時，IE6-瀏覽器才支持。因?yàn)?first-line 中存在連接符的原因 */


/* ::before 在被選元素前插入內(nèi)容。需要使用 content 屬性來指定要插入的內(nèi)容。被插入的內(nèi)容實(shí)際上不在文檔樹中（IE7-不支持） */
div::before {content: "是啊！";}  /* 這里是插入文字 */ 
/* 默認(rèn)這個偽元素是行內(nèi)元素，且繼承元素可繼承的屬性 */
/* 所有偽元素都必須放在出現(xiàn)該偽元素的選擇器的最后面。若寫成 p:before em 就是不合法的 */


/* ::after 在被元素后插入內(nèi)容，其用法和特性與 :before 相似（IE7-不支持） */
div::after {content: url(girl.jpg);}  /* 這里是插入圖片 */
/* 默認(rèn)這個偽元素是行內(nèi)元素，且繼承元素可繼承的屬性 */
/* 使用 :before :after 的主要目的是為了省略不必要的標(biāo)簽。其中 content 屬性是必不可少的 */
/* 注意：通過 :before 或 :after 生成的元素并不在DOM文檔樹中，所以通過 :first-child 或 :last-child 是匹配不到它們的 */

/* 以上偽元素還支持單冒號寫法 */


/* ::selection 匹配用戶被用戶選中或者處于高亮狀態(tài)的部分。在火狐瀏覽器使用時需要添加-moz前綴（IE8-瀏覽器不支持） */
div::selection{color: red;  background-color: blue;}  /* 這里用戶選擇的內(nèi)容文字顏色會變?yōu)榧t色，并有藍(lán)色背景 */
/* firefox瀏覽器需要添加 -moz- 前綴 */
/* 只支持雙冒號寫法。只支持 color 和 background-color 兩個屬性 */

/* ::placeholder 匹配占位符的文本，只有元素設(shè)置了placeholder屬性時，該偽元素才能生效 */
/* 該偽元素不是CSS的標(biāo)準(zhǔn)，它的實(shí)現(xiàn)可能在將來會有所改變，所以要決定使用時必須謹(jǐn)慎 */
input::-webkit-input-placeholder{color: lightblue;}   /* chrome 瀏覽器下建議采用這種寫法。測試中發(fā)現(xiàn)，不加前綴也可以 */
/* 在一些瀏覽器中（IE10和Firefox18及其以下版本）會使用單冒號的形式 */


/* ::backdrop（處于試驗(yàn)階段）*/
h1:fullscreen::backdrop {background: orange;}
/* 用于改變?nèi)聊Ｊ较碌谋尘邦伾?，全屏模式的默認(rèn)顏色為黑色。該偽元素只支持雙冒號的形式 */

content、quotes 屬性

<style type="text/css">
/* content屬性 */
/* content屬性應(yīng)用于 before 和 after 偽元素 */
div:before {
    content: normal;  /* 默認(rèn) */
}
/* content: <string>|<url>|attr(<identifier>) */
/* <string> 里面的內(nèi)容會原樣顯示，即使包含某種標(biāo)記也不例外。比如 content: "前綴<br>"; 頁面上依然原樣顯示 */
/* 如果希望生成內(nèi)容中有一個換行，則需要使用 \A */
/* 若是一個很長的串，需要它拆分成多行則需要用 \ 對換行符轉(zhuǎn)義 */
div:before {
    content: "第一段\
              第二段";
}
div:after {
    content: "\A后綴";
}


/* url */
div:before {
    content: url(girl.jpg);
}


/* attr(<identifier>) */
div:before {
    content: attr(data-before);
}


/* counter 屬性*/
/* 涉及到CSS計數(shù)器，會有專門的一節(jié)內(nèi)容介紹 */


/* quotes 屬性 */
/* 管理引號
前單引號 -> \2018
后單引號 -> \2019
前雙引號 -> \201C
后雙引號 -> \201D
*/
div: before {
    quotes:'201C' '201D' '2018' '2019';
}
/*
第一個值定義最外層開始引號（open-quote），第二個串定義最外層結(jié)束引號（close-quot）。
第三個值定義次外層開始引號，第四個值定義次外層結(jié)束引號。
第五個值定義次次外層開始引號，第六個值定義次次外層結(jié)束引號……
*/


/* open-quote|close-quote */
/* 測試前先把之前寫的偽元素刪除掉 */
div {
    display: inline-block;
    quotes: '\201C' '\201D' '\2018' '\2019' '\201C' '\201D';
}
div:before {
    content: open-quote;
}
div:after {
    content: no-close-quote;
}
</style>
</head>
<body>
<!-- <div data-before="前綴">測試文字</div> -->

<div>最外層
    <div>次外層
        <div>最里層</div>
    </div>
</div>  
</body>
  • 注意：IE8-瀏覽器僅支持單冒號表示法:

偽元素應(yīng)用示例

    <style type="text/css">
    .bubble {
        position: relative;
        display: inline-block;
        border: 1px solid #ccc;
        border-radius: 3px;
        padding: 10px;
        margin: 20px;
        background-color: #fff;
    } 

    .bubble:before {
        content: "";
        display: inline-block;
        width: 10px;
        height: 10px;
        position: absolute;
        top: -6px;
        border-left: 1px solid #ccc;
        border-top: 1px solid #ccc;
        transform: rotateZ(45deg);
        background-color: #fff;
    }
    </style>
</head>
<body">
<div class="bubble">Hello world!</div>
</body>
  • 首字下沉
    <style type="text/css">
    div {
        width: 200px;
        border: 1px solid black;
    }

    div:first-letter {
        float: left;
        margin-left: 5px;
        margin-right: 5px;
        font-size: 30px;
    }  
    </style>
</head>
<body>
<div>亞冠聯(lián)賽是亞洲最高等級的俱樂部賽事，相當(dāng)于歐洲的歐洲冠軍聯(lián)賽及南美洲的南美解放者杯……</div>  
</body>
  • 釘子效果
    <style type="text/css">
    /* 使用 :before 偽元素畫圓 */
    .box:before {
        display: block;
        content: "釘子";
        height: 50px;
        width: 50px;
        border-radius: 50%;
        background-color: black;
        color: white;
        font-weight:bold;
        text-align: center;
        line-height: 50px;
    }

    /* 使用 :after 偽元素畫三角形 */
    .box:after {
        display: block;
        content: "";
        width: 0;
        height: 0;
        border: 25px solid rgba(0, 0, 0, 0.05); /* 為更易理解，沒有將顏色設(shè)置為透明 transparent */
        border-top: 50px solid black;
        margin-top: -20px;
    }
    </style>
</head>
<body>
<div class="box"></div>
</body>
  • 圖片疊加效果
    <style type="text/css">
    * {
        padding: 0;
        margin: 0;
    }  

    .box {
        position:relative;
        margin: 30px auto 0;
        width: 300px;
    }

    .box-img {
        position: absolute;
        z-index: 1;
        width: 300px;
        height: 200px;
        border: 5px solid gray;    
    }
 
    .box:before,
    .box:after {
        content:"";
        position: absolute;   
        width: 300px;
        height: 200px; 
        border: 5px solid gray;
        background-color: #D5B07C;
    }

    .box:before {
        left: -10px;
        top: 0;
        transform: rotateZ(-5deg);
    }

    .box:after {
        top: 4px;
        left: 0;
        transform: rotateZ(5deg);
    }
    </style>
</head>
<body>
<div class="box">
    <\img class="box-img" src="http://img5.imgtn.bdimg.com/it/u=2301672014,2503443361&fm=15&gp=0.jpg" alt="圖片疊加效果">
</div>
</body>

參考

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • CSS選擇器大致可以分成5類：基本選擇器，層次選擇器，屬性選擇器，偽類，偽元素?；?，層次，屬性選擇器比較容易理解...
    張歆琳閱讀 1,953評論 4贊 26
  • 本文轉(zhuǎn)載自：眾成翻譯譯者：為之漫筆鏈接：http://www.zcfy.cc/article/239原文：http...
    極樂君閱讀 7,537評論 1贊 62
  • 偽類 :first-child :last-child :nth-child(n) 1.:first-child ...
    叁度閱讀 1,092評論 0贊 0
  • 偽類： 偽類用于當(dāng)已有元素處于的某個狀態(tài)時，為其添加對應(yīng)的樣式，這個狀態(tài)是根據(jù)用戶行為而動態(tài)變化的．比如說，當(dāng)用戶...
    葶寳寳閱讀 1,054評論 1贊 13
  • CSS偽類用于向某些選擇器添加特殊的效果。 CSS偽元素用于將特殊的效果添加到某些選擇器。 可以明確兩點(diǎn)，第一兩者...
    曾基錕閱讀 1,411評論 0贊 1

友情鏈接更多精彩內(nèi)容