CSS 伪类与伪元素

什么是伪类？

伪类（Pseudo-class）用于选择元素的特定状态或位置。它以冒号（ : ）作为前缀标识符，常见的伪类包括动态伪类、结构伪类等。

1. 动态伪类

动态伪类用于根据用户行为或元素状态应用样式。

• 锚点伪类 ：

  • :link ：选择未访问的链接。
  • :visited ：选择已访问的链接。

• 行为伪类 ：

  • :hover ：鼠标悬停在元素上时的样式。
  • :active ：用户点击元素时的样式。
  • :focus ：元素获取焦点时的样式。

2. 结构伪类

结构伪类用于选择元素的特定位置或结构。

• :first-child ：选择第一个子元素。
• :last-child ：选择最后一个子元素。
• :nth-child(n) ：选择第 n 个子元素。
• :lang(language) ：选择指定语言的元素。

注意 ：伪类以冒号开头，选择器和冒号之间不能有空格，伪类名中间也不能有空格。

什么是伪元素？

伪元素（Pseudo-element）用于选择元素的特定部分或生成内容。它与伪类的区别在于，伪元素表示元素内部的内容，逻辑上存在但在文档树中并不存在。CSS3 规定伪元素用双冒号（ :: ）表示。

常见伪元素

• ::after ：在元素内容之后插入内容。
• ::before ：在元素内容之前插入内容。
• ::first-letter ：选择元素的第一个字母。
• ::first-line ：选择元素的第一行。

实战案例

案例 1：动态伪类

HTML

<a href="https://example.com">访问链接</a>

CSS

a:link {
    color: blue; /* 未访问的链接 */
}

a:visited {
    color: purple; /* 已访问的链接 */
}

a:hover {
    color: red; /* 鼠标悬停时的链接 */
}

a:active {
    color: green; /* 点击时的链接 */
}

效果 ：

• 默认链接为蓝色。
• 访问后变为紫色。
• 鼠标悬停时变为红色。
• 点击时变为绿色。

案例 2：结构伪类

HTML

<ul>
    <li>第一项</li>
    <li>第二项</li>
    <li>第三项</li>
</ul>

CSS

li:first-child {
    color: red; /* 第一个子元素 */
}

li:last-child {
    color: blue; /* 最后一个子元素 */
}

li:nth-child(2) {
    color: green; /* 第二个子元素 */
}

效果 ：

• 第一项为红色。
• 第二项为绿色。
• 第三项为蓝色。

案例 3：伪元素

HTML

<p>这是一个段落。</p>

CSS

p::first-letter {
    font-size: 24px; /* 首字母放大 */
    color: red;
}

p::first-line {
    font-weight: bold; /* 第一行加粗 */
}

p::before {
    content: "前缀："; /* 在内容前插入文本 */
    color: blue;
}

p::after {
    content: "（后缀）"; /* 在内容后插入文本 */
    color: green;
}

效果 ：

• 首字母放大并变为红色。
• 第一行加粗。
• 段落前插入蓝色文本“前缀：”。
• 段落后插入绿色文本“（后缀）”。

伪类与伪元素的区别

注意事项

1. 兼容性 ：

   • CSS3 规定伪元素用双冒号（ :: ），但为了兼容旧版浏览器，单冒号（ : ）也可以使用。
   • 例如， ::after 和 :after 在大多数浏览器中效果相同。

2. 内容生成 ：

   • ::before 和 ::after 必须与 content 属性一起使用，否则不会生效。

3. 性能 ：

   • 过度使用伪类和伪元素可能会影响页面性能，尤其是在复杂的页面中。