當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

015_CSS伪元素选择器

發布時間：2025/4/17 CSS 54 豆豆

生活随笔收集整理的這篇文章主要介紹了 015_CSS伪元素选择器小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 偽元素選擇器是通過雙冒號(::)加上特定的具有某種含義的單詞來確定所選元素。

2. 偽元素/偽對象: 不存在在DOM文檔中, 是虛擬的元素, 是創建的新元素。這個新元素(偽元素)是某個元素的子元素, 這個子元素雖然在邏輯上存在, 但卻并不實際存在于文檔樹中。

3. 為了向后兼容, CSS2和CSS1偽元素可接受單冒號語法。在CSS3中, 雙冒號取代了偽元素的單冒號表示法。這是W3C試圖區分偽類和偽元素的嘗試。

4. ::first-line偽元素

4.1. "first-line"偽元素用于向文本的首行設置特殊樣式。

4.2. "first-line"偽元素只能用于塊級元素。

4.3. 在下面的例子中, 瀏覽器會根據"first-line"偽元素中的樣式對p元素的第一行文本進行修飾:

p::first-line {color: #ff0000;font-variant: small-caps; }

4.4. 以下屬性適用于::first-line偽元素:

字體屬性
顏色屬性
背景屬性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

4.5. 例子

4.5.1. 代碼

<!DOCTYPE html> <html><head><title>first-line偽元素</title><meta charset="utf-8" /><style type="text/css">p::first-line {color: #ff0000;font-variant: small-caps;}</style></head><body><p>you can use the ::first-line pseudo-element to add <br />a special effect to the first line of a text!</p></body> </html>

4.5.2. 效果圖

5. ::first-letter偽元素

5.1. "first-letter"偽元素用于向文本的首字母設置特殊樣式:

p::first-letter {color: #ff0000;font-size: xx-large; }

5.2. "first-letter"偽元素只能用于塊級元素。

5.3. 下面的屬性適用于::first-letter偽元素:

字體屬性
顏色屬性
背景屬性
外邊距屬性
內邊距屬性
邊框屬性
text-decoration
vertical-align(僅當"float"為"none")
text-transform
line-height
float
clear

5.4. 例子

5.4.1. 代碼

<!DOCTYPE html> <html><head><title>first-letter偽元素</title><meta charset="utf-8" /><style type="text/css">p::first-letter {color: #ff0000;font-size: xx-large;}</style></head><body><p>You can use the ::first-letter pseudo-element to add a special effect to the first letter of a text!</p></body> </html>

5.4.2. 效果圖

6. ::before偽元素

6.1. "::before"偽元素可以在元素的內容前面插入新內容。

6.2. 下面的例子在每個<h1>元素前面插入一幅圖片:

h1::before {content: url("logo.gif"); }

6.3. 例子

6.3.1. 代碼

<!DOCTYPE html> <html><head><title>before偽元素</title><meta charset="utf-8" /><style type="text/css">h1::before {content: url("w3school.png"); }</style></head><body><h1>This is a heading</h1><p>The ::before pseudo-element inserts content before an element.</p><h1>This is a heading</h1><p><b>注釋: </b>如果已規定!DOCTYPE, 那么Internet Explorer 8(以及更高版本)支持::before。</body> </html>

6.3.2. 效果圖

7. ::after偽元素

7.1. "::after"偽元素可以在元素的內容之后插入新內容。

7.2. 下面的例子在每個<h1>元素后面插入一幅圖片:

h1::after {content: url("logo.gif"); }

7.3. 例子

7.3.1. 代碼

<!DOCTYPE html> <html><head><title>after偽元素</title><meta charset="utf-8" /><style type="text/css">h1::after {content: url("w3school.png");}</style></head><body><h1>This is a heading</h1><p>The ::after pseudo-element inserts content after an element.</p><h1>This is a heading</h1><p><b>注釋: </b>如果已規定!DOCTYPE, 那么Internet Explorer 8(以及更高版本)支持::after。</body> </html>

7.3.2. 效果圖

8.?::selection選擇器

8.1. ::selection選擇器匹配被用戶選取的部分。

8.2. 只能向::selection選擇器應用少量CSS屬性: color、background、cursor以及outline。

8.3. 例子

8.3.1. 代碼

<!DOCTYPE html> <html><head><title>selection偽元素</title><meta charset="utf-8" /><style type="text/css">::selection {color:#ff0000;}</style></head><body><h1>請試著選取頁面上的文本</h1><p>這是一個段落。</p><div>這是 div 元素中的文本。</div></body> </html>

8.3.2. 效果圖

9. 偽元素

總結

以上是生活随笔為你收集整理的015_CSS伪元素选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。