选择器

基础选择器

标签选择器

根据 HTML 标签名 选中元素。

p {
  color: blue;
}

类选择器

根据元素的 class 属性 选中元素。 在 CSS 中用 . 开头。

.title {
  font-size: 20px;
  color: red;
}

ID 选择器

根据元素的 id 属性 选中元素。 在 CSS 中用 # 开头。

#main {
  background: lightgray;
}

通配符选择器

* {
  margin: 0;
  padding: 0;
}

关系选择器

根据 元素之间的层级或关系 来选择目标元素，A，B 表示选择的对象，A 和 B 之间的符号表示 A 和 B 之间的关系。

后代选择器 常用

选中 A 元素内部所有的 B 元素（无论嵌套多少层）。

div p {
  color: red;
}

<div>
  <p>我是 div 里面的 p</p>
  <section><p>我也会被选中</p></section>
</div>

子代选择器 常用

只选中 A 的直接子元素 B（不包括更深层的嵌套）。

div > p {
  color: blue;
}

<div>
  <p>我会变蓝</p>
  <section><p>我不会变蓝</p></section>
</div>

相邻兄弟选择器 较少使用

选中 紧跟在 A 后面的第一个兄弟元素 B。

h2 + p {
  color: green;
}

<h2>标题</h2>
<p>我会变绿</p>
<p>我不会变绿</p>

通用兄弟选择器较少使用

选中 A 后面的所有兄弟元素 B（不必紧挨着）

h2 ~ p {
  color: orange;
}

<h2>标题</h2>
<p>第一个段落</p>
<div>中间的div</div>
<p>第二个段落</p>

总结

关系选择器可以描述多个对象，不一定只有两个对象，他可以一层层向下寻找：

/*div的所有子代p，p中的直接子元素.box*/
div p > .box {
}

选择器	示例	匹配关系	匹配数量	常用场景	联想
后代选择器	A B	A 内所有 B	多个	嵌套样式，如菜单内的列表	无约束（ ）
子代选择器	A > B	A 的直接子元素 B	多个	限定层级结构	等级森严（>），只管直接下级
相邻兄弟选择器	A + B	紧挨着 A 的下一个兄弟 B	1 个	标题后第一个段落	两者能加（+），说明是兄弟
通用兄弟选择器	A ~ B	A 后所有兄弟 B	多个	同级多个相似元素	两者约等于（~），大家都是人

分组选择器

分组选择器（Group Selector） 用于 对多个选择器同时应用相同的样式。 选择器之间使用 逗号（,） 分隔。

/*分组选择器一般会进行换行*/
selector1,
selector2,
selector3 {
  property: value;
}

这样可以让多个元素共享同一套样式，避免重复书写。

伪类选择器

状态伪类

• 链接伪类

a:link {
  color: blue;
} /* 未访问的链接 */
a:visited {
  color: purple;
} /* 已访问的链接 */
a:hover {
  color: red;
} /* 鼠标悬停 */
a:active {
  color: orange;
} /* 正在点击的状态（鼠标未弹起） */

伪类顺序：LVHA:link → :visited → :hover → :active

• 用户行为伪类

伪类	作用
:hover	鼠标悬停
:active	被点击时
:focus	获得焦点（如输入框）
:disabled	被禁用
:checked	单选框/复选框选中状态

结构伪类

只讲解常用的三个伪类选择器

first-child

第一个子元素

last-child

最后一个子元素

• 常用场景：元素之间的分割线

html

<div class="vertical-divider">
  <span>苹果</span>
  <span>香蕉</span>
  <span>葡萄</span>
</div>

css

.vertical-divider {
  display: flex;
  align-items: center;
  font-size: 14px;
}
.vertical-divider span {
  padding: 0 10px;
  border-right: 1px solid #ccc; /* 添加竖线 */
}

.vertical-divider span:last-child {
  border-right: none;
}

• 输出：

苹果香蕉葡萄

nth-child(n)

第 n 个子元素

selector:nth-child(n) {
  property: value;
}

n 支持以下值：

1. 数字 n

li:nth-child(3) { color: red; }

表示选中父元素中的第 3 个子元素。

2. 关键词 odd / even

li:nth-child(odd) { background: #eee; }  /* 奇数 */
li:nth-child(even) { background: #ddd; } /* 偶数 */

3. 公式

li:nth-child(3n) { color: orange; }      /* 每3个选一个：第3,6,9… */
li:nth-child(3n+1) { color: green; }    /* 第1,4,7… */
li:nth-child(2n+1) { background: #eee; } /* 奇数 */

• n是从0开始的，之后递增
• :nth-child() 按父元素的所有子元素顺序计数
  • 不管子元素类型是什么
  • 所以如果有不同类型的元素，中间会计入计数

<!--li:nth-child(2) 不会选中第2个 <li>，而是选中 <p>-->
<ul>
  <li>1</li>
  <p>段落</p>
  <li>2</li>
</ul>

伪元素选择器

伪元素选择器（Pseudo-elements）是 CSS 中用来选中元素的特定部分（而不是整个元素）的选择器。它通常用于在不改变 HTML 结构的前提下，给元素添加样式或内容。

伪元素	作用	使用频率
::before	在元素内容之前插入内容	常用
::after	在元素内容之后插入内容	常用
::first-line	选中元素的第一行文字
::first-letter	选中元素的第一个字母或字符
::selection	选中用户鼠标选中的文本部分
::placeholder	输入框的占位文字	常用
::marker	选中列表项符号（如 • 或 1.）
::backdrop	用于全屏元素（如 <dialog>、<video>）的背景层

::before 和 ::after 用于在一个元素的 内容前后 插入 **生成的内容（generated content），插入的元素类似行内元素，而不用在 HTML 中增加实际标签。

• ::before → 元素内容前面插入内容
• ::after → 元素内容后面插入内容

基本语法：

selector::before {
  content: "内容";
}

selector::after {
  content: "内容";
}

html

<textarea placeholder="请输入内容..."></textarea>

css

textarea::placeholder { color: gray; }

属性选择器

属性选择器是一种根据元素属性来选取元素的 CSS 选择器。它可以让你不依赖类名或标签名，而是通过元素的 属性和值 来进行样式匹配。

选择器语法	作用描述	示例
[attr]	选择带有指定属性的元素	input[disabled]
[attr="value"]	属性值完全等于指定值	input[type="text"]
[attr~="value"]	属性值中包含某个独立单词（用空格分隔）	div[class~="active"]
[attr^="value"]	属性值以指定字符串开头	a[href^="https"]
[attr$="value"]	属性值以指定字符串结尾	img[src$=".png"]
[attr*="value"]	属性值中包含指定字符串（任意位置）	a[href*="example"]

示例

/*选择所有 type="text" 的输入框。*/
input[type="text"] {
  border: 1px solid #ccc;
}