真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css3偽元素是什么

本篇文章給大家分享的是有關(guān)css3偽元素是什么，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

創(chuàng)新互聯(lián)建站于2013年成立，先為伊吾等服務(wù)建站，伊吾等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為伊吾企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。

在css3中，偽元素是一個(gè)附加在選擇器末尾的關(guān)鍵詞，其直義理解就是“假元素”或者“偽裝元素”，實(shí)際上就是虛擬的元素；偽元素主要用于創(chuàng)建一些不在DOM樹中的元素，并為其添加樣式。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

css3偽元素

偽元素直義理解就是"假元素"或者"偽裝元素"。其實(shí)也可以這么理解， 偽元素實(shí)際上就是虛擬的元素，不存在的元素(code形式), 你也無發(fā)在文檔中找到他們，因此說偽元素是虛擬元素。

偽元素是一個(gè)附加在選擇器末尾的關(guān)鍵詞，主要用于創(chuàng)建一些不在DOM樹中的元素，并為其添加樣式。

通過偽元素您不需要借助元素的 ID 或 class 屬性就可以對(duì)被選擇元素的特定部分定義樣式。例如通過偽元素您可以設(shè)置段落中第一個(gè)字母的樣式，或者在元素之前、之后插入一些內(nèi)容等等。

在 CSS1 和 CSS2 中，偽元素的使用與偽類相同，都是使一個(gè)冒號(hào):與選擇器相連。但在 CSS3 中，將偽元素單冒號(hào)的使用方法改為了使用雙冒號(hào)::，以此來區(qū)分偽類和偽元素。因此，建議在使用偽元素時(shí)使用雙冒號(hào)而不是單冒號(hào)。

selector::pseudo-element {
    property: value;
}

其中，selector 為選擇器，pseudo-element 為偽元素的名稱，property 為 CSS 中的屬性，value 為屬性對(duì)應(yīng)的值。

注意：一個(gè)選擇器中只能使用一個(gè)偽元素，而且偽元素必須緊跟在選擇器之后。按照最新的 W3C 規(guī)范，在定義偽元素時(shí)您應(yīng)該使用雙冒號(hào)::而不是單個(gè)冒號(hào):，以便區(qū)分偽類和偽元素。但由于舊版本的 W3C 規(guī)范并未對(duì)此進(jìn)行特別區(qū)分，因此目前絕大多數(shù)的瀏覽器都同時(shí)支持使用單冒號(hào)和雙冒號(hào)兩種方式來定義偽元素。

CSS 中提供了一系列的偽元素，如下表所示：

偽元素例子例子描述
::afterp::after在每個(gè)

元素之后插入內(nèi)容

::beforep::before在每個(gè)

元素之前插入內(nèi)容

::first-letterp::first-letter匹配每個(gè)

元素中內(nèi)容的首字母

::first-linep::first-line匹配每個(gè)

元素中內(nèi)容的首行

::selectionp::selection匹配用戶選擇的元素部分
::placeholderinput::placeholder匹配每個(gè)表單輸入框（例如 ）的 placeholder 屬性

1. ::after

偽元素 ::after 能夠在指定元素的后面插入一些內(nèi)容，在 ::after 中需要使用 content 屬性來定義要追加的內(nèi)容，而且在 ::after 中必須定義 content 屬性才會(huì)生效（沒有需要插入的內(nèi)容時(shí)可以將 content 屬性的值定義為空""）。

下面通過一個(gè)示例來演示偽元素 ::after 的使用：




    


    偽元素 ::after

    偽元素 ::after

    偽元素 ::after

運(yùn)行結(jié)果如下圖所示：

css3偽元素是什么

2. ::before

偽元素 ::before 能夠在指定元素的前面插入一些內(nèi)容。與 ::after 相似，::before 中也需要使用 content 屬性來定義要追加的內(nèi)容，而且在 ::before 中必須定義 content 屬性才會(huì)生效（沒有需要插入的內(nèi)容時(shí)可以將 content 屬性的值定義為空""）。

下面通過一個(gè)示例來演示偽元素 ::before 的使用：




    


    偽元素 ::before

    偽元素 ::before

    偽元素 ::before

運(yùn)行結(jié)果如下圖所示：

css3偽元素是什么

3. ::first-letter

偽元素 ::first-letter 用來設(shè)置指定元素中內(nèi)容第一個(gè)字符的樣式，通常用來配合 font-size 和 float 屬性制作首字下沉效果。需要注意的是，偽元素 ::first-letter 僅可以用于塊級(jí)元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級(jí)元素。

下面通過示例來演示偽元素 ::first-letter 的使用：




    


    
偽元素 ::first-letter

運(yùn)行結(jié)果如下圖所示：

css3偽元素是什么

4. ::first-line

偽元素 ::first-line 用來設(shè)置指定元素中內(nèi)容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級(jí)元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級(jí)元素。

下面通過示例來演示偽元素 ::first-line 的使用：




    


    
偽元素 ::first-line 用來設(shè)置指定元素中內(nèi)容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級(jí)元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級(jí)元素。

運(yùn)行結(jié)果如下圖所示：

css3偽元素是什么

5. ::selection

偽元素 ::selection 用來設(shè)置對(duì)象被選中時(shí)的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時(shí)的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。

下面通過示例來演示偽元素 ::selection 的使用：




    


    
偽元素 ::selection 用來設(shè)置對(duì)象被選中時(shí)的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時(shí)的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。 

運(yùn)行結(jié)果如下圖所示：

css3偽元素是什么

6. ::placeholder

偽元素 ::placeholder 用來設(shè)置表單元素（、