CSS 伪元素选择器

伪元素(pseudo-elements)将虚构元素插入文档以实现某些效果。

伪类使用 :, 伪元素使用 ::.

1. first-letter

::first-letter 伪元素用于设置任何非内联元素的首字母，或前导标点符号和首字母（如果文本以标点符号开头）的样式.

The ::first-letter pseudo-element styles the first letter, or a leading punctuation char‐ acter and the first letter (if the text starts with punctuation), of any non-inline element.

下面规则会让每个段落的首字母变为红色：

p::first-letter {color: red;}

::first-letter 伪元素最常用于创建首字母大写或首字下沉的排版效果。你可以把每个 <p> 的首字母设置为标题其余部分的两倍大，但你可能只想将此样式应用于第一段的首字母：

p:first-of-type::first-letter {font-size: 200%;}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    h2:first-letter {font-size: 200%;}
  </style>
</head>
<body>
<h2>This is an h2 element</h2>
</body>
</html>

2. firts-line

类似地，::first-line 可用于给元素中文本的第一行设置样式。

例如，你可以将文档中每个段落的第一行放大并显示为紫色：

p::first-line {
  font-size: 150%;
  color: purple;
}

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    p::first-line { font-size: 150%; color: purple; }
  </style>
</head>
<body>
<p>
This is a paragraph of text that has only
one stylesheet applied to it. That style
causes the first line to be big and purple.
No other line will have those styles applied.
</p>
</body>
</html>

3. firts-letter 和 first-line 的限制

::first-letter 和 ::first-line 伪元素目前只能应用于块显示元素（block-display elements, 例如标题或段落），而不能应用于行内显示元素（inline-display elements, 例如超链接）。

应用于 ::first-line 和 ::first-letter 的 CSS 属性也存在限制.

允许使用的属性列表：

`::first-letter`	`::first-line`
All font properties	All font properties
All background properties	All background properties
All text decoration properties	All text decoration properties
All inline typesetting properties	All inline typesetting properties
All border properties	All border properties
All inline layout properties
	All margin properties
	All padding properties
`box-shadow`
`color`	`color`
`opacity`	`opacity`

4. placeholder

对于 ::placeholder 能使用的样式的限制于 ::first-line 是相同的。

此伪元素匹配放置在文本输入框和文本区域中的占位符文本。

例如，你可以将文本输入占位符文本设为斜体，并将文本区域占位符文本设为暗蓝色，如下所示：

input::placeholder {font-style: italic;}
textarea::placeholder {color: cornflowerblue;}

对于上述 input 和 textarea, 占位符文本可以通过 placeholder 属性来设置，像这样：

<input type="text" placeholder="(XXX) XXX-XXXX" id="phoneno">
<textarea placeholder="Tell us what you think!"></textarea>

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    input::placeholder {font-style: italic;}
    textarea::placeholder {color: cornflowerblue;}
  </style>
</head>
<body>
<input type="text" placeholder="(XXX) XXX-XXXX" id="phoneno">
<textarea placeholder="Tell us what you think!"></textarea>
</body>
</html>

4. file-selector-button

文件选择输入通常是像这样写的:

<label for="uploadField">Select file from computer</label>
<input id="uploadField" type="file">

::file-selector-button 伪元素用于选中这样的按钮.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    input::file-selector-button { border: thick solid gray; border-radius: 2em; }
  </style>
</head>
<body>
<label for="uploadField">Select file from computer</label>
<input id="uploadField" type="file">
</body>
</html>

5. before 和 after

比如你想在每个 <h2> 元素前面加上一对银色方括号，以达到印刷效果：

h2::before {content: "]]"; color: silver;}

CSS 允许你通过 ::before 和 ::after 伪元素来给指定的元素前后插入额外的内容。

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Simple styling of a simple document</title>
  <style type="text/css">
    html { background-color: white; }
    h2::before {content: "]]"; color: silver;}
  </style>
</head>
<body>
<h2> This is an h2 element</h2>
</body>
</html>

6. 高亮伪元素

CSS 中一个相对较新的概念是能够对已突出显示的内容片段进行样式设置，无论是通过用户选择还是用户代理本身。

名称	描述
`::selection`	指文档中因为用户操作而突出显示的部分（例如，用鼠标拖动选择的文本）
`::target-text`	指的是已被定位的文档的文本；这与 `:target` 伪类不同，后者指的是整个目标元素，而不是文本片段
`::spelling-error`	指文档中被用户代理标记为拼写错误的部分
`::grammar-error`	指文档中被用户代理标记为语法错误的部分

当用户使用鼠标指针点击、按住并拖动以突出显示某些文本时，这被称为选择。大多数浏览器都为文本选择设置了默认样式。开发者可以通过设置 ::selection 伪元素的样式，从而覆盖浏览器的默认样式。

比如，你想将选定的文本设置蓝色背景，文字颜色为白色。CSS 样式如下：

::selection {color: white; background-color: navy;}

::target-text: 利用此功能，可以将文本添加到 URL 末尾作为片段标识符的一部分进行突出显示，从而吸引用户对页面一个或多个部分的注意。