css3偽元素有哪些及怎么用

這篇文章主要講解了“css3偽元素有哪些及怎么用”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“css3偽元素有哪些及怎么用”吧！

為桂陽(yáng)等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及桂陽(yáng)網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、桂陽(yáng)網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

css3偽元素有：1、“::after”，可在指定元素的后面插入一些內(nèi)容；2、“::before”；3、“::first-letter”；4、“::first-line”；5、“::selection”；6、“::placeholder”。

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

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

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

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

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

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

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

1. ::after

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

下面通過(guò)一個(gè)示例來(lái)演示偽元素 ::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>

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

css3偽元素有哪些及怎么用

2. ::before

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

下面通過(guò)一個(gè)示例來(lái)演示偽元素 ::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>

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

css3偽元素有哪些及怎么用

3. ::first-letter

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

下面通過(guò)示例來(lái)演示偽元素 ::first-letter 的使用：

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

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

css3偽元素有哪些及怎么用

4. ::first-line

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

下面通過(guò)示例來(lái)演示偽元素 ::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 用來(lái)設(shè)置指定元素中內(nèi)容第一行的樣式，與 ::first-letter 類(lèi)似，偽元素 ::first-line 也僅可以用于塊級(jí)元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級(jí)元素。</p>
</body>
</html>

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

css3偽元素有哪些及怎么用

5. ::selection

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

下面通過(guò)示例來(lái)演示偽元素 ::selection 的使用：

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

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

css3偽元素有哪些及怎么用

6. ::placeholder

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

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

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

css3偽元素有哪些及怎么用

感謝各位的閱讀，以上就是“css3偽元素有哪些及怎么用”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)css3偽元素有哪些及怎么用這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

新聞名稱(chēng)：css3偽元素有哪些及怎么用
文章來(lái)源：http://muchs.cn/article28/picdjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標(biāo)簽優(yōu)化、微信公眾號(hào)、全網(wǎng)營(yíng)銷(xiāo)推廣、App開(kāi)發(fā)、企業(yè)建站、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容