CSS 伪类

伪类 (Pseudo-classes) 是添加到选择器上的关键字，用于指定你想要设置样式的元素的特殊状态。例如，你可以用它来设置鼠标悬停在元素上时的样式，或者设置已被访问和未被访问链接的不同样式。

伪类的语法是在选择器后加上冒号 :，然后是伪类的名称。

selector:pseudo-class { property: value; }

动态伪类 (Dynamic Pseudo-classes)

这些伪类常用于 <a> 和 <button> 元素，根据用户的行为来改变样式。

:link: 选择未被访问的链接。
:visited: 选择已被访问的链接。
:hover: 选择鼠标指针正悬停在其上的元素。
:active: 选择正在被用户激活（例如，点击）的元素。
:focus: 选择已获得焦点的元素（例如，通过键盘 Tab 键或鼠标点击的输入框）。

css

a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: none; }
a:active { color: red; }

input:focus {
  border-color: blue;
  outline: none;
}

结构性伪类 (Structural Pseudo-classes)

这些伪类根据元素在文档树中的位置或与其他元素的关系来选择它们。

:first-child: 选择作为其父元素的第一个子元素的元素。
:last-child: 选择作为其父元素的最后一个子元素的元素。
:nth-child(n): 一个非常强大的伪类，用于选择一个或多个特定的子元素。n 可以是数字、关键字 (even, odd) 或公式 (an+b)。
- li:nth-child(3): 选择第 3 个 <li>。
- li:nth-child(even): 选择所有偶数位的 <li>。
- li:nth-child(2n+1): 选择所有奇数位的 <li> (从第1个开始，每隔2个选一个)。
:nth-of-type(n): 与 :nth-child(n) 类似，但它只计算指定类型的元素。例如 p:nth-of-type(2) 会选择第二个 <p> 元素，即使它不是父元素下的第二个子元素。
:first-of-type: 选择其父元素下特定类型的第一个子元素。
:last-of-type: 选择其父元素下特定类型的最后一个子元素。
:only-child: 选择没有兄弟元素的元素（即它是其父元素的唯一子元素）。
:only-of-type: 选择其父元素下没有其他同类型兄弟元素的元素。
:root: 选择文档的根元素。在 HTML 中，根元素总是 <html>。
:empty: 选择没有任何子元素（包括文本节点）的元素。

css

/* 列表中的第一个和最后一个 li 元素 */
li:first-child { font-weight: bold; }
li:last-child { color: gray; }

/* 表格的奇数行添加背景色，实现斑马条纹 */
tr:nth-child(odd) {
  background-color: #f2f2f2;
}

其他伪类

:not(selector): 选择不匹配括号内选择器的所有元素。
- input:not([type="submit"]): 选择所有 type 不是 submit 的 <input> 元素。
:checked: 选择所有被选中的表单元素，如复选框 (<input type="checkbox">) 或单选按钮 (<input type="radio">)。
:disabled: 选择所有被禁用的表单元素。

伪类极大地扩展了 CSS 选择器的能力，使我们能够创建出更具动态性和交互性的复杂样式。

CSS 伪类 ​

动态伪类 (Dynamic Pseudo-classes) ​

结构性伪类 (Structural Pseudo-classes) ​

其他伪类 ​

CSS 伪类

动态伪类 (Dynamic Pseudo-classes)

结构性伪类 (Structural Pseudo-classes)

其他伪类