CSS选择器的用法 - AI生成

CSS选择器核心用法详解

CSS选择器的作用是选中HTML页面中的特定元素，然后为其应用样式。我会从最基础到常用的进阶选择器，逐一讲解并配合示例。

1. 基础选择器（最常用）

这是最基础的选择器，覆盖了80%的日常开发场景。

选择器类型 语法 作用 示例
元素选择器 标签名 选中所有该标签的元素 p { color: red; } 选中所有<p>标签
ID选择器 #ID名 选中唯一的、指定ID的元素 #title { font-size: 20px; } 选中id="title"的元素
类选择器 .类名 选中所有该类名的元素 .box { border: 1px solid #000; } 选中class="box"的元素
通配符选择器 * 选中页面所有元素（慎用） * { margin: 0; padding: 0; } 重置所有元素的边距

示例代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 元素选择器：所有p标签文字变红 */
    p { color: red; }
    /* ID选择器：唯一的#title元素字体变大 */
    #title { font-size: 24px; }
    /* 类选择器：所有.box类元素加边框 */
    .box { border: 1px solid gray; padding: 10px; }
    /* 通配符：清除所有元素默认边距 */
    * { margin: 0; padding: 0; }
  </style>
</head>
<body>
  <h1 id="title">这是标题</h1>
  <p class="box">这是第一个段落</p>
  <p>这是第二个段落</p>
  <div class="box">这是一个div</div>
</body>
</html>

2. 组合选择器（进阶）

用于选中元素之间有特定关系的目标，是实现复杂布局的关键。

选择器类型 语法 作用 示例
后代选择器 A B 选中A元素内部的所有B元素（嵌套任意层） div p { color: blue; } 选中div里的所有p
子元素选择器 A > B 选中A元素直接子级的B元素（仅一层嵌套） ul > li { list-style: none; } 选中ul直接子级的li
相邻兄弟选择器 A + B 选中A元素紧挨着的下一个B元素 h1 + p { font-weight: bold; } 选中h1后面第一个p
通用兄弟选择器 A ~ B 选中A元素后面所有同级的B元素 h1 ~ p { line-height: 1.5; } 选中h1后面所有p

示例代码：

1
2
3
4
5
6
7
8
/* 后代选择器：.container里的所有span文字变绿 */
.container span { color: green; }
/* 子元素选择器：.list直接子级的li加下划线 */
.list > li { text-decoration: underline; }
/* 相邻兄弟选择器：.title后面第一个div加背景色 */
.title + div { background: #f5f5f5; }
/* 通用兄弟选择器：.title后面所有div字体变小 */
.title ~ div { font-size: 14px; }

3. 属性选择器（精准匹配）

根据元素的属性及属性值选中元素，常用于表单、链接等场景。

语法 作用 示例
[属性名] 选中有该属性的元素 input[disabled] { opacity: 0.5; } 选中禁用的input
[属性名=值] 选中属性值完全等于指定值的元素 a[href="https://baidu.com"] { color: #00f; }
[属性名^=值] 选中属性值以指定值开头的元素 img[src^="https://"] { border: 2px solid green; }
[属性名$=值] 选中属性值以指定值结尾的元素 a[href$=".pdf"] { icon: url(pdf-icon.png); }
[属性名*=值] 选中属性值包含指定值的元素 div[class*="item"] { margin: 5px; } 选中class含item的div

4. 伪类选择器（状态/位置）

选中元素的特定状态或位置（如:hover、:first-child），是交互样式的核心。

常用伪类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 链接状态 */
a:link { color: #000; } /* 未访问的链接 */
a:visited { color: #999; } /* 已访问的链接 */
a:hover { color: #f00; } /* 鼠标悬浮 */
a:active { color: #0f0; } /* 点击时 */

/* 元素位置 */
li:first-child { color: #00f; } /* 第一个子元素 */
li:last-child { color: #f0f; } /* 最后一个子元素 */
li:nth-child(2) { color: #ff0; } /* 第二个子元素（支持odd/even奇偶） */

/* 表单状态 */
input:focus { outline: none; border: 2px solid #00f; } /* 输入框聚焦 */
input:checked { accent-color: #f00; } /* 复选框选中 */

5. 伪元素选择器（创建虚拟元素）

用于为元素的特定部分添加样式（如:before、:after），需要配合content属性使用。

1
2
3
4
5
6
7
8
9
10
/* 在元素前插入内容 */
h2:before { content: "★"; color: #ff0; margin-right: 5px; }
/* 在元素后插入内容 */
p:after { content: "→"; color: #00f; margin-left: 5px; }
/* 选中元素的第一行文字 */
p::first-line { font-weight: bold; }
/* 选中元素的第一个字符 */
h1::first-letter { font-size: 30px; }
/* 选中用户选中的文本 */
::selection { background: #ff0; color: #000; }

总结

  1. 基础选择器是核心：元素选择器选标签、ID选唯一元素、类选批量元素，覆盖大部分基础场景；
  2. 组合选择器处理层级关系：后代选所有嵌套、子选择器仅选直接子级，兄弟选择器选同级元素；
  3. 伪类/伪元素是交互关键：伪类控制元素状态（如:hover），伪元素创建虚拟内容（如:before），是实现复杂样式的核心。
随记
#AI随记
CSS选择器的用法 - AI生成
https://blog.carlvictor.cn/posts/b3fd1c48.html
作者
Carl Victor
发布于
2026年8月27日
许可协议