1、::selection 伪元素

::selection 伪元素以用户选择的文本部分为目标，它提供了一种将样式应用于所选文本并自定义其外观的方法

::selection {
  /* 当用户在页面上选择文本时，它将以黄色背景和红色文本颜色突出显示 */
  background-color: yellow;
  color: red;
}

2、::first-letter伪元素

::first-letter 伪元素允许您设置块级元素的第一个字母的样式

p::first-letter {
  /* 每个段落的第一个字母显示为红色 */
  color: red;
}

3、::first-line 伪元素

类似于::first-letter，::first-line伪元素以文本或块级元素的第一行为目标，可以使用此伪元素将特定样式应用于段落或标题的起始行

p::first-line {
  /* 每个段落的第一行将以粗体显示并带有下划线 */
  font-weight: bold;
  text-decoration: underline;
}

4、::marker 伪元素

::marker 伪元素以列表项的标记为目标，例如无序列表中的项目符号点或有序列表中的数字。使用此伪元素，可以自定义标记的外观。

li::marker {
  color: blue;
  font-weight: bold;
}

5、::placeholder 伪元素

::placeholder 伪元素允许在输入字段和文本区域中设置占位符文本的样式，通过将自定义样式应用到占位符，可以增强用户体验并使其与您的整体设计保持一致。

input::placeholder {
  /* 输入字段中的占位符文本将以浅灰色样式显示 */
  color: #999;
}

6、::grammar-error 和::spelling-error 伪元素

::grammar-error和::spelling-error伪元素允许分别对标记为语法或拼写错误的文本部分设置样式。当内容中存在错误时，这些伪元素可用于向用户提供视觉提示

/* 段落中的语法错误将以划线文本修饰和红色显示，而拼写错误将以下划线和蓝色显示 */
p::grammar-error {
  text-decoration: line-through;
  color: red;
}
p::spelling-error {
  text-decoration: underline;
  color: blue;
}

7、::backdrop 伪元素

::backdrop 伪元素与全屏API结合使用，以在全屏模式下自定义元素背后的背景。它允许您将默认的黑色背景更改为自定义颜色或样式

video::backdrop {
  /* 当一个视频元素处于全屏模式时，它后面的背景将有一个灰色的背景色 */
  background-color: gray;
}