css引入偽類和偽元素概念是為了格式化文檔樹以外的信息。也就是說,偽類和偽元素是用來修飾不在文檔樹中的部分,比如,一句話中的第一個字母,或是列表中的第一個元素,又或者是鼠標懸停在某個超鏈接上時要設置的樣式。
什么是偽元素?
偽元素:用于創(chuàng)建一些不在文檔樹中的元素,并為其添加樣式。實際上,偽元素就是選取某些元素前面或后面這種普通選擇器無法完成的工作??刂频膬?nèi)容和元素是相同的,但它本身是基于元素的抽象,并不存在于文檔結構中。比如說,我們可以通過:before來在一個元素前增加一些文本,并為這些文本添加樣式。
元素特點
1. 優(yōu)點:
(1)不占用 DOM 節(jié)點,減少 DOM 節(jié)點數(shù)。
(2)讓 CSS 幫助解決了一部分 JavaScript 問題,簡化了開發(fā)。
(3)避免增加毫無意義的頁面元素。
2. 缺點:
(1)不利于調(diào)試。
(2)偽元素不真正在文檔內(nèi)容中體現(xiàn),只在視覺效果上體現(xiàn),所以不能給偽元素添加具有實際意義的內(nèi)容,這部分內(nèi)容不會搜索引擎抓取。
CSS 中提供了一系列的偽元素,如下表所示:
偽元素 | 例子 | 例子描述 |
::after | p::after | 在每個 <p> 元素之后插入內(nèi)容 |
::before | p::before | 在每個 <p> 元素之前插入內(nèi)容 |
::first-letter | p::first-letter | 匹配每個 <p> 元素中內(nèi)容的首字母 |
::first-line | p::first-line | 匹配每個 <p> 元素中內(nèi)容的首行 |
::selection | p::selection | 匹配用戶選擇的元素部分 |
::placeholder | input::placeholder | 匹配每個表單輸入框(例如 <input>)的 placeholder 屬性 |
1. ::after
偽元素 ::after 能夠在指定元素的后面插入一些內(nèi)容,在 ::after 中需要使用 content 屬性來定義要追加的內(nèi)容,而且在 ::after 中必須定義 content 屬性才會生效(沒有需要插入的內(nèi)容時可以將 content 屬性的值定義為空"")。
2. ::before
偽元素 ::before 能夠在指定元素的前面插入一些內(nèi)容。與 ::after 相似,::before 中也需要使用 content 屬性來定義要追加的內(nèi)容,而且在 ::before 中必須定義 content 屬性才會生效(沒有需要插入的內(nèi)容時可以將 content 屬性的值定義為空"")。
3. ::first-letter
偽元素 ::first-letter 用來設置指定元素中內(nèi)容第一個字符的樣式,通常用來配合 font-size 和 float 屬性制作首字下沉效果。需要注意的是,偽元素 ::first-letter 僅可以用于塊級元素,行內(nèi)元素想要使用該偽元素,則需要先將其轉換為塊級元素。
4. ::first-line
偽元素 ::first-line 用來設置指定元素中內(nèi)容第一行的樣式,與 ::first-letter 類似,偽元素 ::first-line 也僅可以用于塊級元素,行內(nèi)元素想要使用該偽元素,則需要先將其轉換為塊級元素。
5. ::selection
偽元素 ::selection 用來設置對象被選中時的樣式,需要注意的是,偽元素 ::selection 中只能定義元素被選中時的 color、background、cursor、outline 以及 text-shadow(IE11 尚不支持定義該屬性)等屬性。
6. ::placeholder
偽元素 ::placeholder 用來設置表單元素(<input>、<textarea> 元素)的占位文本(通過 HTML 的 placeholder 屬性設置的文本)。
C語言網(wǎng)提供由在職研發(fā)工程師或ACM藍橋杯競賽優(yōu)秀選手錄制的視頻教程,并配有習題和答疑,點擊了解:
一點編程也不會寫的:零基礎C語言學練課程
解決困擾你多年的C語言疑難雜癥特性的C語言進階課程
從零到寫出一個爬蟲的Python編程課程
只會語法寫不出代碼?手把手帶你寫100個編程真題的編程百練課程
信息學奧賽或C++選手的 必學C++課程
藍橋杯ACM、信息學奧賽的必學課程:算法競賽課入門課程
手把手講解近五年真題的藍橋杯輔導課程