文档库

Appearance

伪元素 ​

伪元素选择器（Pseudo-elements）是 CSS 中用来选中元素的特定部分（而不是整个元素）的选择器。它通常用于在不改变 HTML 结构的前提下，给元素添加样式或内容。

伪元素作用使用频率
::before在元素内容之前插入内容常用
::after在元素内容之后插入内容常用
::first-line选中元素的第一行文字
::first-letter选中元素的第一个字母或字符
::selection选中用户鼠标选中的文本部分
::placeholder输入框的占位文字常用
::marker选中列表项符号（如 • 或 1.）
::backdrop用于全屏元素（如 <dialog>、<video>）的背景层

root ​

在 HTML 页面中，:root 指的就是 <html> 元素。

css
:root {
  background: #fff;
}

约等价于：

html {
  background: #fff;
}

但它们 并不完全一样，:root 更常用、也更强。

优先级

css
html< :root < html内联

before&after ​

::before 和 ::after 用于在一个元素的 内容前后 插入生成的内容（generated content），插入的元素类似行内元素，而不用在 HTML 中增加实际标签。

  • ::before → 元素内容前面插入内容
  • ::after → 元素内容后面插入内容

基本语法：

css
selector::before {
  content: "内容";
}

selector::after {
  content: "内容";
}
html
<textarea placeholder="请输入内容..."></textarea>
css
textarea::placeholder {
  color: gray;
}