溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

css3偽元素是什么

發(fā)布時間：2022-01-06 12:59:10 來源：億速云 閱讀：130 作者：柒染 欄目：web開發(fā)

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

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

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

css3偽元素

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

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

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

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

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

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

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

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

偽元素例子例子描述
::afterp::after在每個 <p> 元素之后插入內(nèi)容
::beforep::before在每個 <p> 元素之前插入內(nèi)容
::first-letterp::first-letter匹配每個 <p> 元素中內(nèi)容的首字母
::first-linep::first-line匹配每個 <p> 元素中內(nèi)容的首行
::selectionp::selection匹配用戶選擇的元素部分
::placeholderinput::placeholder匹配每個表單輸入框（例如 <input>）的 placeholder 屬性

1. ::after

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::after {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::after {
            content:"要插入的內(nèi)容";
            color: red;
            font-size: 6px;
        }
        p.three::after {
            content: url('./smiley.gif');
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">偽元素 ::after</p>
    <p class="two">偽元素 ::after</p>
    <p class="three">偽元素 ::after</p>
</body>
</html>

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

css3偽元素是什么

2. ::before

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        p.one::before {
            content:"";
            display: inline-block;
            width: 50px;
            height: 10px;
            background: blue;
        }
        p.two::before {
            content:"要插入的內(nèi)容";
            color: red;
            font-size: 6px;
        }
        p.three::before {
            content: url('./smiley.gif');
            position: relative;
            top: 8px;
        }
    </style>
</head>
<body>
    <p class="one">偽元素 ::before</p>
    <p class="two">偽元素 ::before</p>
    <p class="three">偽元素 ::before</p>
</body>
</html>

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

css3偽元素是什么

3. ::first-letter

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-letter{
            font-size: 2em;
            color: blue;
        }
    </style>
</head>
<body>
    <p>偽元素 ::first-letter</p>
</body>
</html>

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

css3偽元素是什么

4. ::first-line

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        p::first-line{
            font-size: 1.5em;
            color: blue;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>偽元素 ::first-line 用來設(shè)置指定元素中內(nèi)容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級元素。</p>
</body>
</html>

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

css3偽元素是什么

5. ::selection

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

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

<!DOCTYPE html>
<html>
<head>
    <style>
        p::selection{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <p>偽元素 ::selection 用來設(shè)置對象被選中時的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。 </p>
</body>
</html>

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

css3偽元素是什么

6. ::placeholder

偽元素 ::placeholder 用來設(shè)置表單元素（<input>、<textarea> 元素）的占位文本（通過 HTML 的 placeholder 屬性設(shè)置的文本），示例代碼如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        input.text::placeholder{
            color: red;
            background-color: #CCC;
        }
    </style>
</head>
<body>
    <input placeholder="請輸入一段文本">未使用偽元素 ::placeholder<br>
    <input placeholder="請輸入一段文本" class="text">使用偽元素 ::placeholder 的效果
</body>
</html>

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

css3偽元素是什么

以上就是css3偽元素是什么，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手