每個開發者都應該知道的 CSS 偽元素(Pseudo Element)

偽元素被用於選擇樣式，並被應用於DOM中的特定元素或部分元素。

什麼是偽元素(Pseudo Element)?

偽元素被用於選擇樣式，並被應用於DOM中的特定元素或部分元素。

偽元素（Pseudo-elements） 由 ( :: ) 符號錶示。

多個偽元素能被用於單個元素。

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

下面展示一個例子：

偽元素（Pseudo-elements） 能够幫助將樣式應用於HTML元素的第一個字母或者第一行。

這兒有六種偽元素，讓我們用一個例子來看看每一個偽元素吧。

1) ::first-line

::first-line 偽元素有助於選擇樣式並將樣式應用於文本、段落和標題的第一行。

對於::first-line 這個元素，我們只能將其應用於這些屬性：font,color,background,word-spacing,letter-spacing,text-decoration,vertical-align,text-transform,line-height 和 clear。

注意::first-line 這個偽元素僅適用於塊級元素。

來個例子吧：

HTML

CSS

p::first-line { color: green; }

2) ::first-letter

::first-letter 偽元素有助於選擇和應用樣式到文本和段落和標題的第一個字母。

對於::first-letter 這個元素，我們只能將其應用於這些屬性：font,color,background,margin,padding,border,text-decoration,vertical-align (only if “float” is “none”),text-transform,line-height,float 和 clear。

舉個小栗子（example）:

HTML

CSS

p::first-letter { color: red;

font-size: 18px; }

3) ::before

::before 偽元素有助於在元素的內容之前添加或插入內容。

例子:

HTML

CSS

p::before { content: url(smiley.gif); }

4) ::after

::after 偽元素有助於在元素的內容之後添加或插入內容。

例:

HTML

CSS

p::after { content: url(smiley.gif); }

5) ::marker

::marker 偽元素有助於將樣式應用於order屬性和取消order屬性列錶。

Example:

HTML

• Attractive Aurora
• Attractive
• Aurora

CSS

::marker { color: red; }

6) ::selection

::selection 偽元素有助於將樣式應用於用戶選擇的文本。

::selection 偽元素接受最少數量的 CSS 屬性。

::selection 偽元素支持colors,background,outline 和 cursor.。

例:

HTML

CSS

::selection { color: red; background: yellow; }

我認為這篇文章可能對你有用：

感謝閱讀，別忘了評論和分享哦~