第三篇、CSS选择器

选择器的写法

书写规范推荐：

• 选择器和大括号中间保留一个空格
• 冒号和属性值之间保留一个空格
• 每个属性独占一行

选择器名 {
    属性名: 属性值;
    属性名: 属性值;
    ......;
    属性名: 属性值;
}

基础选择器

标签选择器：匹配页面中所有同名的 HTML 标签，是最基础的选择器，作用范围广。

p {
    font-style: italic; /* 字体样式：斜体（可选normal/italic/oblique） */
    font-variant: small-caps; /* 字体变体：小型大写字母（可选normal/small-caps） */
    font-weight: 700; /* 字体粗细：粗体（等同于bold，可选100-900/normal/bold/bolder/lighter） */
    font-size: 22px; /* 字体大小：22像素（可选数值+单位/百分比/xx-small/x-small/small/medium/large/x-large/xx-large） */
    line-height: 2; /* 行高：字号的2倍（可选数值/数值+单位/百分比/normal） */
    font-family: "Microsoft Yahei", Arial, sans-serif; /* 字体族：微软雅黑优先，其次Arial，最后无衬线字体（可选具体字体名/通用字体族） */
}

类选择器：匹配页面中所有 class 属性包含该类名的元素，是开发中使用最多的选择器，核心优势是「可复用」

• 一个标签可绑定多个类选择器，只需在class属性值中用空格分隔多个类名

.class-name {
    /* font: [字体样式] [字体变体] [字体粗细] 字体大小/[行高] 字体系列; */
    font: italic small-caps 700 22px/2 "Microsoft Yahei", Arial, sans-serif; /* 斜体 + 小型大写字母 + 粗体 + 22px字号/2倍行高 + 微软雅黑/Arial/无衬线字体 */
}

id选择器：匹配页面中唯一的、id 属性为该名称的元素（HTML 规范要求：一个页面中 id 必须唯一，不能重复）

#id-name {
    font: 22px "Microsoft Yahei", Arial, sans-serif;
}

通配符选择器：匹配页面中所有 HTML 元素（包括html、body、div、p等所有标签）

* {
    margin: 0; /* 清除所有元素的默认外边距 */
    padding: 0; /* 清除所有元素的默认内边距 */
    box-sizing: border-box; /* 统一盒模型 */
}

关系选择器

后代选择器：匹配某个元素下所有层级的指定后代元素（包括子、孙、曾孙等），选择器之间用空格分隔，是最常用的层级选择器

/* 后代选择器：选中.card下所有层级的div标签（无论嵌套深度） */
.card div {
    color: #2d3748; /* 文本颜色：深灰蓝色（网页常用主文本色，视觉舒适） */
    text-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.2) inset; /* 文本阴影：水平2px/垂直2px偏移，模糊4px，扩展1px，半透明黑色内阴影 */
    text-transform: capitalize; /* 文本大小写：首字母大写（可选none/uppercase/lowercase） */
    user-select: none; /* 禁止用户选中/复制文本（可选：auto/ text/ none/ all） */
}

子代选择器：仅匹配某个元素下直接子级的指定元素（仅子层级，不包含孙级及更深层级），选择器之间用>分隔，比后代选择器更精准

/* 子代选择器：仅选中.list下直接子级的div标签（孙级div不生效） */
.list > div {
    text-indent: 2em; /* 文本缩进：首行缩进2个字符宽度（中文段落标配，英文常用1em） */
    letter-spacing: 0.5px; /* 字符间距：字符间增加0.5px，12px以下小字号建议设0避免拥挤 */
    word-spacing: 1px; /* 单词间距：仅对空格分隔的英文单词生效，中文无影响 */
    text-align: justify; /* 文本对齐：整体两端对齐，需搭配text-justify控制对齐逻辑 */
    text-align-last: justify; /* 最后一行对齐：强制最后一行也两端对齐（默认left） */
    text-justify: inter-ideograph; /* 对齐算法：调整汉字/表意字符间距（中文专用，英文用inter-word） */
}

邻接兄弟选择器：匹配某个元素紧挨着的下一个同级兄弟元素（仅相邻的第一个），选择器之间用+分隔，需满足「同级、相邻、在后」三个条件

/* 邻接兄弟选择器：选中h2后紧邻的第一个同级p标签（仅第一个相邻p） */
h2 + p {
    text-decoration: underline wavy #f06292 2px; /* 复合属性：下划线 + 波浪样式 + 粉色 + 粗细2px（覆盖以下单属性，优先级更高） */
    text-decoration-line: underline; /* 装饰线类型：下划线（可选none/overline/line-through/combine-inherit） */
    text-decoration-style: wavy; /* 装饰线样式：波浪线（可选solid/dashed/dotted/double/wavy） */
    text-decoration-color: #f06292; /* 装饰线颜色：粉色（独立于文本color，可单独设置） */
    text-decoration-thickness: 2px; /* 装饰线粗细：2px（可选数值/百分比/auto/from-font） */
    
    text-underline-offset: 4px; /* 下划线偏移：距离文本基线4px（仅对underline生效） */
    text-underline-position: under; /* 下划线位置：在文本下方（可选auto/below/under/left/right，仅对underline生效） */
}

通用兄弟选择器：匹配某个元素之后所有同级的指定兄弟元素（不限相邻，只要是同级且在后），选择器之间用~分隔，覆盖范围比邻接兄弟选择器更广

/* 通用兄弟选择器：选中h2之后所有同级的div标签（无论是否相邻） */
h2 ~ div {
    text-emphasis: dot #f06292; /* 复合属性：强调标记样式（点）+ 颜色（粉色），覆盖以下单属性 */
    text-emphasis-style: dot; /* 强调标记样式：点（可选none/filled/open/dot/circle/disc/字符串/图标） */
    text-emphasis-color: #f06292; /* 强调标记颜色：粉色（默认继承文本color） */
    
    text-emphasis-position: over right; /* 标记位置：水平文本在上方，竖排文本在右侧（可选over/under + right/left） */
}

分组选择器

并集选择器：匹配多个选择器对应的所有元素（相当于“或”的逻辑），选择器之间用逗号分隔，核心优势是「代码复用」，可给多个不同选择器的元素设置相同样式。

/* 并集选择器：同时选中div标签、.card类、.feature类对应的所有元素 */
div, .card, .feature {
    background-color: #f8f9fa; /* 背景色：浅灰白（自定义值） */
    background-image: url("feature-bg.jpg"); /* 背景图片：自定义图片路径 */
    background-repeat: no-repeat; /* 背景重复：不重复（可选repeat/repeat-x/repeat-y/no-repeat/space/round） */
    background-attachment: scroll; /* 背景附着：随滚动条滚动（可选scroll/fixed/local） */
    background-position: center center; /* 背景位置：水平垂直居中（可选方位词/数值+单位） */
    /* background-position-x: center;  */ /* 背景水平位置：居中（可选方位词/数值+单位，拆分写法） */
    /* background-position-y: center;  */ /* 背景垂直位置：居中（可选方位词/数值+单位，拆分写法） */
    background-size: cover; /* 背景尺寸：覆盖容器（可选auto/length/percent/cover/contain） */
    background-origin: padding-box; /* 背景原点：从内边距盒开始显示（可选padding-box/border-box/content-box） */
    background-clip: content-box; /* 背景裁剪：仅在内容盒内显示（可选padding-box/border-box/content-box/text） */
    
    background-blend-mode: multiply; /* 背景混合模式：正片叠底（可选normal/multiply/screen/overlay等） */
    -webkit-background-blend-mode: multiply; /* 兼容webkit内核：正片叠底 */
    -moz-background-blend-mode: multiply; /* 兼容Firefox：正片叠底 */
}

交集选择器：匹配同时满足多个选择器条件的元素（相当于 “且” 的逻辑），选择器之间无分隔符拼接，核心特点是「精准匹配」，仅选中同时符合所有条件的元素

• 单独的.active是纯类选择器，只有 “标签 + 类”“类 + 类” 等无分隔符拼接的组合才是交集选择器；ID 选择器因唯一性强，极少用于交集选择器

/* 交集选择器：仅选中同时是p标签且class包含.active的元素（标签+类） */
p.active {
    /* background复合简写：[颜色] [图片] [重复] [附着] [位置]/[尺寸] [原点] [裁剪] */
    background: #f8f9fa url("feature-bg.jpg") no-repeat scroll center center / cover padding-box content-box; /* 背景：浅灰白 + 自定义图片 + 不重复 + 随滚动条滚动 + 水平垂直居中/覆盖容器 + 内边距盒原点 + 内容盒裁剪 */
    
    background-blend-mode: multiply; /* 背景混合模式：正片叠底（可选normal/multiply/screen/overlay等） */
    -webkit-background-blend-mode: multiply; /* 兼容webkit内核：正片叠底 */
    -moz-background-blend-mode: multiply; /* 兼容Firefox：正片叠底 */
}

伪选择器

伪类选择器（:xxx）

伪类核心是匹配元素的特殊状态、位置、关系，按用途可细分为 6 个子类，覆盖前端开发所有核心场景：

交互状态伪类（用户行为触发）：匹配元素因用户交互产生的动态状态，是页面交互性的核心，需遵循特定书写顺序（如链接的 LVHA）。

选择器	作用	核心示例
:hover	鼠标悬浮在元素上	button:hover { background: #0056b3; transform: scale(1.02); }
:active	元素被点击按下（未松开）	.btn:active { transform: scale(0.98); }（点击按压反馈）
:focus	元素获取焦点（输入框/按钮）	input:focus { border-color: #007bff; box-shadow: 0 0 0 2px rgba(0,123,255,0.25); }
:focus-visible	仅在「键盘聚焦」时显示焦点样式	a:focus-visible { outline: 2px solid #007bff; }（优化无障碍体验）
:link	未访问的链接（仅<a>）	a:link { color: #007bff; text-decoration: none; }
:visited	已访问的链接（仅<a>）	a:visited { color: #6c757d; }

结构位置伪类（DOM 结构匹配）：根据元素在 DOM 树中的位置、层级匹配，是批量布局样式的核心，分为「通用子元素」和「同类型子元素」两类。

（1）通用子元素（匹配所有类型子元素）

选择器	作用	核心示例
:first-child	父元素下第一个子元素（任意类型）	ul > li:first-child { border-top: 1px solid #eee; }
:last-child	父元素下最后一个子元素（任意类型）	ul > li:last-child { border-bottom: 1px solid #eee; }
:nth-child(n)	父元素下第 n 个子元素（n = 数字/even/odd/an+b）	tr:nth-child(odd) { background: #f8f9fa; }（奇数行变色）
:nth-last-child(n)	从后往前数第 n 个子元素	li:nth-last-child(2) { color: #dc3545; }（倒数第二个 li）
:only-child	父元素下唯一的子元素	div:only-child { margin: 0 auto; }（唯一子元素居中）

（2）同类型子元素（仅匹配指定类型）

选择器	作用	核心示例
:first-of-type	父元素下第一个指定类型的子元素	article > p:first-of-type { font-size: 18px; }（第一个 p 标签放大）
:last-of-type	父元素下最后一个指定类型的子元素	article > img:last-of-type { margin-bottom: 0; }（最后一个 img 去外边距）
:nth-of-type(n)	父元素下第 n 个指定类型的子元素	section > h2:nth-of-type(3) { color: #007bff; }（第三个 h2 标蓝）
:nth-last-of-type(n)	从后往前数第 n 个指定类型子元素	div > span:nth-last-of-type(1) { font-weight: bold; }（最后一个 span 加粗）
:only-of-type	父元素下唯一的指定类型子元素	aside > p:only-of-type { padding: 10px; }（唯一 p 标签加内边距）

表单状态伪类（表单元素专属）：匹配表单元素的特殊状态，是表单样式定制的核心。

选择器	作用	核心示例
:disabled	禁用状态的表单元素	input:disabled { background: #e9ecef; cursor: not-allowed; }
:enabled	启用状态的表单元素	input:enabled { border: 1px solid #ced4da; }
:checked	勾选状态的单选 / 复选框	input[type="checkbox"]:checked { accent-color: #007bff; }
:indeterminate	半选状态的复选框（如全选框）	#all-check:indeterminate { accent-color: #ffc107; }
:required	带 required 属性的必填表单元素	input:required { border-left: 3px solid #dc3545; }（必填项标红边）
:optional	无 required 属性的可选表单元素	input:optional { border-left: 3px solid #6c757d; }（可选项标灰边）
:valid	验证通过的表单元素	input:valid { border-color: #28a745; }（验证通过标绿）
:invalid	验证失败的表单元素	input:invalid { border-color: #dc3545; }（验证失败标红）
:read-only	只读状态的表单元素	input:read-only { background: #f8f9fa; color: #6c757d; }（只读灰底）
:read-write	可读写状态的表单元素	input:read-write { background: #fff; border-color: #ced4da; }（可写白底）
:in-range	输入值在限定范围的表单元素	input[type="number"]:in-range { border-color: #28a745; }（范围内标绿）
:out-of-range	输入值超出限定范围的表单元素	input[type="number"]:out-of-range { border-color: #dc3545; }（超范围标红）

否定伪类（排除选择）：唯一的「反向选择」伪类，选中不满足条件的元素，可嵌套使用（CSS4）。

选择器	作用	核心示例
:not(selector)	排除满足 selector 的元素	p:not(.active):not(#intro) { color: #333; }（排除 active 类和 intro id 的 p）

文档状态伪类（页面/窗口状态）：匹配整个文档/窗口的特殊状态，常用作全局样式控制。

选择器	作用	核心示例
:root	匹配文档根元素（HTML）	:root { --main-color: #007bff; }（定义全局 CSS 变量）
:target	匹配锚点定位的目标元素	section:target { border: 2px solid #007bff; }（锚点跳转后高亮）

其他实用伪类：

选择器	作用	核心示例
:empty	无内容（含空格）的空元素	div:empty { height: 20px; background: #f5f5f5; }（空元素占位）
:lang(xx)	匹配指定语言的元素	p:lang(en) { font-family: Arial; }（英文 p 标签用 Arial 字体）

---

伪元素选择器（::xxx）

伪元素核心是创建虚拟元素或选中元素的「部分内容」，按用途细分 3 个子类：

内容插入伪元素（最常用）：在元素内部插入虚拟内容，无实际 HTML 标签，仅 CSS 渲染，必须配合 content 属性（空值也需写 content: ""），否则伪元素不生效。

选择器	作用	核心示例
::before	元素内部最前方插入虚拟内容	.tag::before { content: "🔖"; margin-right: 4px; }（标签前缀图标）
::after	元素内部最后方插入虚拟内容	.clearfix::after { content: ""; display: block; clear: both; }（清浮动）

文本片段伪元素（选中部分文本）：仅选中元素内的特定文本片段，用于文本样式定制。

选择器	作用	核心示例
::first-letter	元素内第一个字符	.article p::first-letter { font-size: 2em; float: left; margin-right: 8px; }
::first-line	元素内第一行文字	.article p::first-line { font-weight: 700; color: #2c3e50; }
::selection	用户选中的文本	::selection { background: #ffc107; color: #fff; }（自定义选中文本样式，Webkit内核需加 -webkit- 前缀）
::placeholder	输入框的占位符文本	input::placeholder { color: #adb5bd; font-size: 14px; }

表单/滚动条伪元素（特殊场景）：用于定制表单组件或滚动条的默认样式（部分需加浏览器前缀）。

选择器	作用	核心示例
::file-selector-button	文件上传按钮	input[type="file"]::file-selector-button { background: #007bff; color: #fff; }
::marker	列表项（li）的标记符号	li::marker { color: #007bff; font-size: 1.2em; }（自定义列表圆点颜色）
::scrollbar	滚动条整体（需浏览器前缀）	::-webkit-scrollbar { width: 6px; } （自定义滚动条宽度仅Webkit内核浏览器）

属性选择器

属性选择器通过匹配 HTML 元素的属性名或属性值来选中元素，语法以方括号 [] 包裹，核心优势是：无需依赖 class/id，直接通过元素自带的属性精准选元素，是定制特殊元素样式的高效工具。

选择器格式	匹配规则	核心特点	典型场景
[attr]	匹配拥有attr属性的元素（无论属性值是什么）	最宽松，仅判断属性存在	选中所有带 disabled 的禁用元素
[attr="value"]	匹配attr属性值完全等于value的元素	精准匹配，值需完全一致	选中 type="password" 的输入框
[attr*="value"]	匹配attr属性值包含value字符串的元素	模糊匹配，包含即可	选中 src 含 "avatar" 的头像图片
[attr^="value"]	匹配attr属性值以value开头的元素	前缀匹配	选中 href 以 "https://" 开头的链接
[attr$="value"]	匹配attr属性值以value结尾的元素	后缀匹配	选中 src 以 ".png" 结尾的图片
[attr~="value"]	匹配attr属性值包含独立的value单词（空格分隔）	多值属性匹配（如class）	选中 class 含独立单词 "active" 的元素
[attr|="value"]	匹配attr属性值以value开头或value-开头的元素	语言属性匹配（如lang）	选中 lang="zh"/lang="zh-CN" 的中文文本