伪元素

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式

自定义滚动条的外观

在CSS中，我们可以使用-webkit-scrollbar来自定义滚动条的外观。该属性提供了七个伪元素：

::-webkit-scrollbar：整个滚动条
::-webkit-scrollbar-button：滚动条上的按钮（下下箭头）
::-webkit-scrollbar-thumb：滚动条上的滚动滑块
::-webkit-scrollbar-track：滚动条轨道
::-webkit-scrollbar-track-piece：滚动条没有滑块的轨道部分
::-webkit-scrollbar-corner：当同时有垂直和水平滚动条时交汇的部分
::-webkit-resizer：某些元素的交汇部分的部分样式（类似textarea的可拖动按钮）

html {
  --maxWidth: 1284px;
  scrollbar-color: linear-gradient(to bottom, #ff8a00, #da1b60);
  scrollbar-width: 30px;
  background: #100e17;
  color: #fff;
  overflow-x: hidden;
}

html::-webkit-scrollbar {
  width: 30px;
  height: 30px;
}

html::-webkit-scrollbar-thumb {
  background: -webkit -
    gradient(linear, left top, left bottom, from(#ff8a00), to(#da1b60));
  background: linear-gradient(to bottom, #ff8a00, #da1b60);
  border-radius: 30px;
  -webkit-box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
    inset -2px -2px 2px rgba(0, 0, 0, 0.25);
  box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
    inset -2px -2px 2px rgba(0, 0, 0, 0.25);
}
html::-webkit-scrollbar-track {
  background: linear-gradient(
    to right,
    #201c29,
    #201c29 1px,
    #100e17 1px,
    #100e17
  );
}

通过这几个伪元素，可以实现你自己喜欢的滚动条外观效果，比如下面这个示例：

::first-line

::first-line 伪元素用于向文本的首行添加特殊样式。

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

注意：::first-line 伪元素只能应用于块级元素。

以下属性适用于 ::first-line 伪元素：

字体属性
颜色属性
背景属性
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

::first-letter

::first-letter 伪元素用于向文本的首字母添加特殊样式。

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

注意：::first-letter 伪元素只适用于块级元素。

下面的属性适用于 ::first-letter 伪元素：

字体属性
颜色属性
背景属性
外边距属性
内边距属性
边框属性
text-decoration
vertical-align（仅当 "float" 为 "none"）
text-transform
line-height
float
clear

::before

::before 伪元素可用于在元素内容之前插入一些内容。

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

<h1>这是一个标题</h1>
<p>::before 伪元素在一个元素的内容之前插入内容。</p>
<h1>这是一个标题</h1>

::after

::after 伪元素可用于在元素内容之后插入一些内容。

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

<h1>这是一个标题</h1>
<p>::after 伪元素在一个元素之后插入内容。</p>
<h1>这是一个标题</h1>

::selection

::selection 伪元素匹配用户选择的元素部分

以下 CSS 属性可以应用于 ::selection：

color
background
cursor
outline

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

::placeholder

选择一个表单元素的占位文本，它允许开发者和设计师自定义占位文本的样式。

input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
<input placeholder="我是红色的！">

::backdrop

在任何处于全屏模式的元素下的即刻渲染的盒子（并且在所有其他在堆中的层级更低的元素之上）。

video::backdrop {
  background-color: #448;
}

注意当 backdrop 可见时，上下两部分的暗蓝灰色的信箱效果。这个区域一般是黑色的，但上面的 CSS 语句修改了它的外观。

::grammar-error

应用于浏览器标识为语法错误的文本段

只有一小部分的css能够应用在::grammar-error的选择器中

color
background-color
cursor
text-emphasis-color (en-US)
text-shadow
outline
text-decoration

::slotted()

用于选定那些被放在 HTML模板中的元素

::cue (:cue)

匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。

只有CSS一小部分属性可以与 :: cue 伪元素一起使用：

color
opacity
visibility
text-decoration
text-shadow
background
outline
font
line-height
white-space
text-combine-upright (en-US)
ruby-position (en-US)

::marker

选中一个list item的marker box，后者通常含有一个项目符号或者数字。它作用在任何设置了display: list-item的元素或伪元素上

ul li::marker {
  color: red;
  font-size: 1.5em;
}
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>

::spelling-error

表示浏览器标记为不正确拼写的文本段。

::spelling-error {
  color: red;
}

只有一小部分CSS属性可用于 ::spelling-error 伪元素选择器：

CSS 伪类

CSS 伪类是添加到选择器的关键字，指定要选择的元素的特殊状态

选择器	例子	例子描述
:is	.abc:is(span, p)	选中类名abc中标签为 span和p 的元素
:focus-within	form:focus-within	表示一个元素获得焦点，或，该元素的后代元素获得焦点
:fullscreen	div:fullscreen	fullscreen应用于当前处于全屏显示模式的元素
:dir()	<div dir="ltr">test <div dir="auto">עִבְרִית</div> </div>	:dir(ltr) 会匹配到内容为test的div.
:default	input:default	该选择器可以在 <button>, <input type="checkbox">, <input type="radio">, 以及 <option> 上使用。允许多个选择的分组元素也可以具有多个默认值，即，它们可以具有最初选择的多个项目。在这种情况下，所有默认值都使用 :default 伪类表示。
:blank	input:blank	选择用户输入为空的输入框，如 <input> 和 <textarea>)。
:any-link	a:any-link	匹配每一个有 href 属性的 <a>、<area> 或 <link> 元素。因此，它会匹配到所有的 :link 或 :visited。
:hsa	a:has(> img)	只会匹配直接包含 <img> 子元素的 <a> 元素
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 <input> 元素。
:disabled	input:disabled	选择每个被禁用的 <input> 元素。
:empty	p:empty	选择没有子元素的每个 <p> 元素。
:enabled	input:enabled	选择每个已启用的 <input> 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 <p> 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 <p> 元素的每个 <p> 元素。
:focus	input:focus	选择获得焦点的 <input> 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 <input> 元素。
:invalid	input:invalid	选择所有具有无效值的 <input> 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 "it" 开头的 <p> 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 <p> 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 <p> 元素的每个 <p> 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not(p)	选择每个非 <p> 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 <p> 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个<p>元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个<p>元素的每个<p>元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 <p> 元素的每个 <p> 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 <p> 元素的每个 <p> 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 <p> 元素。
:optional	input:optional	选择不带 "required" 属性的 <input> 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 <input> 元素。
:read-only	input:read-only	选择指定了 "readonly" 属性的 <input> 元素。
:read-write	input:read-write	选择不带 "readonly" 属性的 <input> 元素。
:required	input:required	选择指定了 "required" 属性的 <input> 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 <input> 元素。
:visited	a:visited	选择所有已访问的链接。

CSS的各种 伪元素 & 伪类

伪元素