CSS中的伪类和伪元素

转载

编程小匠人之魂 2025-10-27 05:42:15

文章标签 css 前端 javascript 伪元素 html 文章分类 HarmonyOS 后端开发

核心概念总结（一句话区分）

伪类：用于选择处于 特定状态 的已有元素。

例如：鼠标悬停时的状态、被点击后的状态、是第一个子元素等。
语法：单冒号 :

伪元素：用于选择并样式化元素的 特定部分，或者 创建不在文档树中的虚拟元素。

例如：元素的第一行字母、在元素内容前后插入新内容等。
语法：双冒号 :: (CSS3 规范，但单冒号 : 也兼容)

一、伪类

伪类就像一个“类”，它不会改变文档结构，而是根据用户行为、文档结构或其他外部条件来为某些元素应用样式。

1. 常见伪类别表

伪类	描述	示例
动态/用户行为伪类
`:hover`	鼠标悬停在元素上时	`a:hover { color: red; }`
`:active`	元素被激活时（如鼠标按下未松开）	`button:active { background: blue; }`
`:focus`	元素获得焦点时（如表单输入框）	`input:focus { border-color: green; }`
`:visited`	已访问过的链接	`a:visited { color: purple; }`
结构伪类
`:first-child`	选择作为其父元素第一个子元素的元素	`li:first-child { font-weight: bold; }`
`:last-child`	选择作为其父元素最后一个子元素的元素	`li:last-child { color: gray; }`
`:nth-child(n)`	选择作为其父元素第 n 个子元素的元素	`li:nth-child(2) { ... }` （选择第二个） `li:nth-child(even) { ... }` （选择偶数位） `li:nth-child(odd) { ... }` （选择奇数位）
`:nth-of-type(n)`	选择在其父元素内，同类型兄弟元素中排第 n 个的元素	`p:nth-of-type(2) { ... }` （选择第二个 `<p>`）
`:not(selector)`	否定伪类，选择不匹配选择器的元素	`div:not(.container) { ... }` （选择所有没有 `container` 类的 div）
表单相关伪类
`:checked`	被选中的单选/复选框	`input[type="checkbox"]:checked { ... }`
`:disabled`	被禁用的表单元素	`input:disabled { opacity: 0.5; }`
`:required`	具有 `required` 属性的表单元素	`input:required { border: 1px solid red; }`

2. 伪类示例代码

<!DOCTYPE html>
<html>
<head>
<style>
  /* 用户行为伪类 */
  .btn:hover {
    background-color: #4CAF50; /* 鼠标悬停时变绿 */
  }
  .btn:active {
    transform: scale(0.98); /* 按下时轻微缩小 */
  }

  /* 结构伪类 */
  ul li:first-child {
    color: red; /* 列表第一项为红色 */
  }
  ul li:nth-child(3) {
    font-style: italic; /* 列表第三项为斜体 */
  }

  /* 否定伪类 */
  p:not(.special) {
    opacity: 0.7; /* 所有没有 special 类的 p 标签变半透明 */
  }
</style>
</head>
<body>

  <button class="btn">悬停我</button>
  <ul>
    <li>第一项（红色）</li>
    <li>第二项</li>
    <li>第三项（斜体）</li>
  </ul>
  <p>这是一个普通段落（半透明）。</p>
  <p class="special">这是一个特殊段落。</p>

</body>
</html>

二、伪元素

伪元素就像一个“虚拟的 HTML 元素”，它允许你为元素的特定部分设置样式，而这些部分并不实际存在于文档流中。

1. 常见伪元素列表

伪元素	描述	示例
`::before`	在元素内容之前插入内容	`p::before { content: ">> "; }`
`::after`	在元素内容之后插入内容	`.clearfix::after { content: ""; clear: both; }`
`::first-line`	选择元素的第一行文本	`p::first-line { font-variant: small-caps; }`
`::first-letter`	选择元素的第一个字母	`p::first-letter { font-size: 2em; }`
`::selection`	选择被用户高亮/选中的部分	`::selection { background: yellow; }`
`::placeholder`	选择表单元素的占位符文本	`input::placeholder { color: #999; }`

重要提示：使用 ::before 和 ::after 时，必须指定 content 属性，即使它是空的 (content: "";)。

2. 伪元素示例代码

<!DOCTYPE html>
<html>
<head>
<style>
  /* 在内容前后插入 */
  blockquote::before {
    content: "“";
    font-size: 3em;
    color: lightgray;
  }
  blockquote::after {
    content: "”";
    font-size: 3em;
    color: lightgray;
  }

  /* 首字下沉 */
  p::first-letter {
    font-size: 200%;
    float: left;
    line-height: 1;
  }

  /* 选中文本样式 */
  ::selection {
    background-color: pink;
    color: black;
  }

  /* 使用 ::after 清除浮动 (经典技巧) */
  .container::after {
    content: "";
    display: table;
    clear: both;
  }
</style>
</head>
<body>

  <blockquote>这是一个名人名言。</blockquote>

  <p>这是一个段落的开始，它的第一个字母会非常大，形成首字下沉效果。后面的文字会正常排列。</p>

</body>
</html>

三、关键区别与记忆技巧

特征	伪类	伪元素
作用对象	整个元素的某种状态	元素的某个特定部分
文档结构	选择已存在的元素	创建一个虚拟的元素/部分
语法	`:hover`, `:first-child`	`::before`, `::first-letter`
核心概念	状态	部分