建站
咨詢
售后
建站咨詢
新聞中心
10年積累的做網(wǎng)站、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有夷陵免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
在 CSS1 和 CSS2 中，偽元素的使用與偽類相同，都是使一個(gè)冒號(hào)
:與選擇器相連。但在 CSS3 中，將偽元素單冒號(hào)的使用方法改為了使用雙冒號(hào)
::，以此來(lái)區(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)兩種方式來(lái)定義偽元素。
CSS 中提供了一系列的偽元素，如下表所示：
| 偽元素 | 例子 | 例子描述 |
|---|---|---|
| ::after | p::after | 在每個(gè) 元素之后插入內(nèi)容 |
| ::before | p::before | 在每個(gè) 元素之前插入內(nèi)容 |
| ::first-letter | p::first-letter | 匹配每個(gè) 元素中內(nèi)容的首字母 |
| ::first-line | p::first-line | 匹配每個(gè) 元素中內(nèi)容的首行 |
| ::selection | p::selection | 匹配用戶選擇的元素部分 |
| ::placeholder | input::placeholder | 匹配每個(gè)表單輸入框（例如 ）的 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 的使用：
偽元素 ::after
偽元素 ::after
偽元素 ::after
運(yùn)行結(jié)果如下圖所示：
圖：偽元素 ::after 的使用
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 的使用：
偽元素 ::before
偽元素 ::before
偽元素 ::before
運(yùn)行結(jié)果如下圖所示：
圖：偽元素 ::before 的使用
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 的使用：
偽元素 ::first-letter
運(yùn)行結(jié)果如下圖所示：
圖：偽元素 ::first-letter 的使用
4. ::first-line
偽元素 ::first-line 用來(lái)設(shè)置指定元素中內(nèi)容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級(jí)元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級(jí)元素。
下面通過(guò)示例來(lái)演示偽元素 ::first-line 的使用：
偽元素 ::first-line 用來(lái)設(shè)置指定元素中內(nèi)容第一行的樣式，與 ::first-letter 類似，偽元素 ::first-line 也僅可以用于塊級(jí)元素，行內(nèi)元素想要使用該偽元素，則需要先將其轉(zhuǎn)換為塊級(jí)元素。
運(yùn)行結(jié)果如下圖所示：
圖：偽元素 ::first-line 的使用
5. ::selection
偽元素 ::selection 用來(lái)設(shè)置對(duì)象被選中時(shí)的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時(shí)的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。
下面通過(guò)示例來(lái)演示偽元素 ::selection 的使用：
偽元素 ::selection 用來(lái)設(shè)置對(duì)象被選中時(shí)的樣式，需要注意的是，偽元素 ::selection 中只能定義元素被選中時(shí)的 color、background、cursor、outline 以及 text-shadow（IE11 尚不支持定義該屬性）等屬性。
運(yùn)行結(jié)果如下圖所示：
圖：偽元素 ::selection 的使用
6. ::placeholder
偽元素 ::placeholder 用來(lái)設(shè)置表單元素（、