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

ReganYue 2021-09-18 12:53:23 阅读数:317

知道 css 元素 pseudo element

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

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

CSS Pseudo Elements That Every Developer Should Know

什麼是偽元素(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; }

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

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

版权声明:本文为[ReganYue]所创,转载请带上原文链接,感谢。 https://gsmany.com/2021/09/20210918125322698m.html