一分钟搞懂伪类和伪元素

在CSS中，伪类（Pseudo-classes）和伪元素（Pseudo-elements）是两个非常强大的工具，它们允许我们为文档中某些特定的状态或部分添加样式，而无需修改HTML结构。尽管它们看起来很相似，但它们的用法和用途却截然不同。

1. 什么是伪类？

在CSS中，我们使用hover表示该元素在鼠标悬停下的样式，类似的还有 active、 focus等。他们被称为伪类，伪类依附于已存在的元素。它们通常以单冒号（:）开头，描述元素的在某种状态或特性下的样式。

伪类选择器非常多，但是大部分可能你一辈子都用不到。

常见伪类

  • :hover ：当用户将鼠标悬停在元素上时生效。

  • :active ：当元素被激活（如点击）时生效。

  • :focus ：当元素获得焦点时生效。

  • :nth-child(n) ：选择父元素的第n个子元素。

  • :first-child ：选择父元素的第一个子元素。

  • :last-child ：选择父元素的最后一个子元素。

  • :not(selector) ：选择不符合指定选择器的元素。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 鼠标悬停时改变链接颜色 */
a:hover {
    color: red;
}

/* 选中表格的偶数行 */
tr:nth-child(even) {
    background-color: #f2f2f2;
}

/* 选中非按钮元素 */
:not(button) {
    border: 1px solid black;
}

2. 什么是伪元素？

伪元素一般用于创建虚拟元素并定义其样式，可以快速为元素增加额外内容，它们通常以双冒号（::）开头。

常见伪元素

  • ::before ：在元素内容之前插入内容。

  • ::after ：在元素内容之后插入内容。

  • ::first-line ：选择元素的第一行文本。

  • ::first-letter ：选择元素的第一个字母。

  • ::selection ：选择用户选中的文本部分。

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 在段落前插入内容 */
    p::before {
      content: "Note: ";
      font-weight: bold;
    }
    
    /* 设置段落第一行的样式 */
    p::first-line {
      font-size: 1.2em;
      color: blue;
    }
    
    /* 设置用户选中文本的样式 */
    ::selection {
      background-color: yellow;
      color: black;
    }

3. 伪类与伪元素的区别

特性 伪类（Pseudo-classes） 伪元素（Pseudo-elements）
定义 选择处于特定状态的元素 选择元素的某个特定部分
语法 单冒号（:） 双冒号（::）
作用对象 整个元素 元素的一部分
常见用途 动态状态（如悬停、焦点） 插入内容、样式化部分文本
示例 :hover, :nth-child, :not ::before, ::after, ::first-line

4. 实际应用场景

4.1 伪类的应用

  • 交互效果 ：为链接、按钮等元素添加悬停、点击等交互效果。
1
2
3
4
button:hover {
    background-color: #4CAF50;
    color: white;
}
  • 表单验证 ：为有效或无效的表单字段添加样式。
1
2
3
4
5
6
input:valid {
    border-color: green;
}
input:invalid {
    border-color: red;
}
  • 结构化选择 ：选择表格的特定行或列。
1
2
3
tr:nth-child(odd) {
    background-color: #f9f9f9;
}

4.2 伪元素的应用

  • 装饰性内容 ：在元素前后插入图标或文本。
1
2
3
4
5
6
7
8
9
10
blockquote::before {
    content: "“";
    font-size: 2em;
    color: #ccc;
}
blockquote::after {
    content: "”";
    font-size: 2em;
    color: #ccc;
}
  • 首字母大写 ：为段落的第一个字母添加特殊样式，例如首字下沉的效果。
1
2
3
4
5
p::first-letter {
    font-size: 2em;
    font-weight: bold;
    color: red;
}
  • 用户选中文本样式 ：自定义用户选中文本的外观。
1
2
3
4
::selection {
    background-color: yellow;
    color: #000;
}