CSS 伪类

CSS 伪类

学习如何使用伪类（pseudo-classes）根据元素的状态或位置设置样式。

什么是伪类？

**伪类（pseudo-class）**是添加到 CSS 选择器中的一个关键字，它指定了所选元素的一种特殊状态。它们不仅仅基于文档树结构来定位元素，还基于外部因素，如用户交互、元素状态或同级元素中的位置。

例如，你可以使用伪类来：

• 用户将鼠标悬停在元素上时设置其样式（:hover）。
• 为已访问和未访问的链接设置不同的样式（:visited、:link）。
• 元素获得焦点时设置其样式（:focus、:focus-visible）。
• 为禁用或已选中的输入元素设置样式（:disabled、:checked）。
• 为同级元素中的第一个或最后一个子元素设置样式（:first-child、:last-child）。

语法

语法是在选择器后面附加一个冒号（:），然后是伪类名称：

selector:pseudo-class-name { property: value; }

注意：伪类名称通常不区分大小写。

区别：不要混淆伪类（一个冒号 :，表示状态）和伪元素（双冒号 ::，表示元素的一部分，如 ::before 或 ::first-line）。现代语法对伪元素使用 ::，但出于向后兼容性考虑，浏览器通常也接受旧式伪元素使用一个冒号。

链接（Anchor）伪类

这些是最常见的伪类之一，用于根据用户交互和历史记录来设置 <a> 标签的样式：

/* 未访问的链接 */
a:link {
  color: #007bff;
}

/* 已访问的链接 */
a:visited {
  color: #6c757d;
}

/* 键盘焦点指示器 */
a:focus-visible {
  outline: 2px solid dodgerblue;
  outline-offset: 1px;
}

/* 鼠标悬停 */
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

/* 链接被激活（点击） */
a:active {
  color: #dc3545; /* 示例：点击时显示红色 */
}

顺序规则 (LVF(V)HA)：为了使这些链接伪类按预期工作，请在 CSS 中按照这个特定顺序定义它们：:link、:visited、:focus、:focus-visible、:hover、:active。这确保了后面的规则正确覆盖前面的规则。

伪类与类的组合使用

你可以将伪类与常规 CSS 类（或其他选择器）结合使用，以实现更具体的样式设置：

/* 仅为带有 'special-link' 类的链接在悬停时设置样式 */
a.special-link:hover {
  color: #ff8c00; /* 深橙色 */
  font-weight: bold;
}

/* 为带有 'required' 类的获得焦点的输入框设置样式 */
input.required:focus {
  border-color: #28a745; /* 获得焦点时显示绿色边框 */
  box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

这允许你根据元素的类及其当前状态进行有针对性的样式设置。

结构性伪类：:first-child

:first-child 伪类选择的是其父元素的第一个子元素。

重要提示：对于旧浏览器如 IE8 提到的浏览器兼容性问题在现代 Web 开发中已不再是主要顾虑。

选择第一个

元素

这个选择器选择的是其父容器内的第一个 <p> 元素：

/* 将任意容器中的第一个段落加粗 */
p:first-child {
  font-weight: bold;
}

选择任意

元素内的第一个 元素

这个选择器仅选择一个 <i> 元素，前提是它是 <p> 元素内的第一个子元素：

/* 将段落内的第一个元素设置为斜体，仅当它是 <i> 标签时 */
p i:first-child {
  color: green;
}

选择作为第一个子元素的

元素内的所有 元素

这个选择器选择的是 <p> 元素的所有后代 <i> 元素，但仅当该 <p> 元素是其父元素的第一个子元素时：

/* 如果斜体文本位于第一个段落内，则将其颜色设为绿色 */
p:first-child i {
  color: green;
}

相关的伪类：你还可以考虑使用 :last-child、:nth-child(n)、:first-of-type、:last-of-type、:nth-of-type(n) 等伪类进行更高级的定位样式设置。

语言伪类：:lang()

:lang() 伪类允许你根据元素的语言（由 lang 属性指定，例如 <p lang="fr">）来应用样式。

示例：为 <q> 元素定义特定语言的引号：

/* 定义法语引号 */
:lang(fr) q {
  quotes: '« ' ' »';
}

/* 定义德语引号 */
:lang(de) q {
  quotes: '„' '“';
}

/* HTML 示例 */
/*
<p>In English, we use <q>double quotes</q>.</p>
<p lang="fr">En français, nous utilisons <q>des guillemets</q>.</p>
<p lang="de">Auf Deutsch verwenden wir <q>Anführungszeichen</q>.</p>
*/

这对于国际化（i18n）处理排版约定很有用。

更多示例

设置表单输入框的焦点样式：:focus 伪类对于可访问性至关重要，它指示哪个表单元素当前处于活动状态。

input:focus {
  border: 2px solid #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
  outline: none; /* 如果自定义样式足够，则移除浏览器默认轮廓 */
}

常用 CSS 伪类

伪元素选择并设置元素的一部分的样式。请记住标准的双冒号语法 ::。

选择器	示例	描述
:link	a:link	选择未访问的链接。
:visited	a:visited	选择已访问的链接。
:hover	button:hover	当鼠标指针悬停在元素上时选择元素。
:active	button:active	当元素被激活时（例如，被点击）选择元素。
:focus	input:focus	当元素获得键盘/鼠标焦点时选择元素。
:focus-visible	a:focus-visible	当元素获得焦点且焦点应可见时选择元素（通常是键盘焦点）。
:target	#section:target	选择其 ID 与 URL 中的片段标识符匹配的元素。

输入框与表单状态：

选择器	示例	描述
:checked	input:checked	选择已选中的单选按钮、复选框或选中选项。
:disabled	input:disabled	选择被禁用的输入元素。
:enabled	input:enabled	选择启用的输入元素。
:required	input:required	选择带有 ‘required’ 属性的输入元素。
:optional	input:optional	选择不带有 ‘required’ 属性的输入元素。
:read-only	input:read-only	选择带有 ‘readonly’ 属性的元素。
:read-write	input:read-write	选择不带有 ‘readonly’ 属性的元素。
:valid	input:valid	根据类型/模式约束选择内容有效的输入元素。
:invalid	input:invalid	选择内容无效的输入元素。
:in-range	input:in-range	选择其值在指定最小/最大范围内的输入元素。
:out-of-range	input:out-of-range	选择其值在指定最小/最大范围之外的输入元素。

结构与位置：

选择器	示例	描述
:root	:root	选择文档的根元素（通常是 <html>）。
:empty	p:empty	选择没有子元素（包括文本节点）的元素。
:first-child	li:first-child	选择同级元素中的第一个元素。
:last-child	li:last-child	选择同级元素中的最后一个元素。
:only-child	p:only-child	选择是其父元素唯一子元素的元素。
:first-of-type	h2:first-of-type	选择同级元素中其类型的第一个元素。
:last-of-type	h2:last-of-type	选择同级元素中其类型的最后一个元素。
:only-of-type	p:only-of-type	选择同级元素中其类型的唯一元素。
:nth-child(n)	tr:nth-child(even)	根据元素在同级元素中的位置选择元素（例如，偶数行）。
:nth-last-child(n)	li:nth-last-child(2)	根据位置选择元素，从末尾开始计数。
:nth-of-type(n)	p:nth-of-type(3)	选择同级元素中其类型的第 n 个元素。
:nth-last-of-type(n)	p:nth-last-of-type(1)	选择同级元素中其类型的第 n 个元素，从末尾开始计数。

逻辑组合：

选择器	示例	描述
:not(selector)	:not(.disabled)	选择不匹配所提供选择器的元素。
:is(selector-list)	:is(header, footer) p	选择匹配列表中任意选择器的元素（简化分组）。
:where(selector-list)	:where(header, footer) p	与 :is() 类似，但特异性为零。

常用 CSS 伪元素

伪元素选择并设置元素的一部分的样式。请记住标准的双冒号语法 ::。

选择器	示例	描述
::before	p::before	在元素内容之前插入生成的内容。
::after	p::after	在元素内容之后插入生成的内容。
::first-letter	p::first-letter	选择块级元素的第一个字母。
::first-line	p::first-line	选择块级元素的第一行。
::marker	li::marker	选择列表项的标记框（例如，项目符号或编号）。
::selection	p::selection	选择当前被用户高亮（选中）的元素部分。

掌握伪类和伪元素可以在 CSS 中实现复杂的样式设置。