完整教程：两万块前端就业课程——学习笔记分享（Day_04）

取值	效果描述	典型应用场景
`none`	无装饰线（默认值）	去除超链接（`<a>`）的默认下划线
`underline`	下划线（文本下方）	模拟超链接样式、强调关键文本
`line-through`	中划线（文本中间）	标注原价（电商平台常见 “原价 ¥199”）
`overline`	上划线（文本上方）	特殊强调（开发中极少使用，了解即可）

三、重点应用案例（开发必掌握）

1. 去除超链接默认下划线（高频需求）

浏览器会默认给 <a> 标签添加下划线（text-decoration: underline），但实际开发中通常需要去除，保持页面简洁：

/* 全局去除a标签下划线 */
a {
  text-decoration: none; /* 核心代码 */
  color: #333; /* 同时修改默认蓝色，避免与普通文本混淆 */
}

/* 鼠标悬停时添加下划线（增强交互提示） */
a:hover {
  text-decoration: underline; /*  hover是鼠标悬停伪类 */
}

2. 标注删除线（电商原价场景）

电商页面中，“原价” 常需用中划线标注，与 “现价” 区分：

  原价：¥199
  现价：¥99

  .original-price {
    text-decoration: line-through; /* 中划线 */
    color: #999; /* 灰色弱化显示 */
  }
  .current-price {
    color: red; /* 红色强调 */
    font-weight: bold; /* 加粗 */
  }

四、使用注意事项（避坑指南）

装饰线颜色继承文本颜色：装饰线的颜色与 color 属性一致（无法单独设置）。例如：
```
.text {
  color: blue;
  text-decoration: underline; /* 下划线会是蓝色（继承color） */
}
```

无法单独调整装饰线位置：下划线、上划线的位置由浏览器默认控制（如距离文本的距离），若需精细调整（如更粗的下划线、自定义位置），建议用 border-bottom 替代：

/* 替代下划线的高级用法 */
.custom-underline {
  /* 移除默认装饰线 */
  text-decoration: none;
  /* 用下边框模拟下划线（可控制粗细、距离） */
  border-bottom: 2px solid red;
  padding-bottom: 2px; /* 调整边框与文本的距离 */
}

与 reset.css 配合使用：浏览器对部分元素（如 <a>）有默认装饰线，项目中建议通过 reset.css 统一重置（避免重复代码）：
```
/* reset.css 中统一处理 */
a { text-decoration: none; }
/* 其他默认样式重置（如列表去除圆点） */
ul { list-style: none; }
```

五、知识小结（含考试重点）

知识点	核心内容	考试重点 / 易混淆点	难度系数
text-decoration 取值	none（无）、underline（下划线）、line-through（删除线）	line-through 的电商场景应用；a 标签默认下划线的去除	⭐⭐
实际开发技巧	用 none 重置 a 标签样式，line-through 标注原价	装饰线颜色继承 text 的 color 属性	⭐⭐
替代方案	用 border 模拟自定义装饰线（如粗下划线）	text-decoration 与 border 的区别（装饰线 vs 边框）	⭐⭐⭐

开发建议

优先掌握核心取值：none 和 line-through 是开发中最常用的，overline 几乎不用，无需深入。
结合交互场景设计：如超链接默认无下划线，hover 时显示（既简洁又有交互提示）。
善用 CSS 重置：通过 reset.css 统一处理默认样式，避免每个页面重复写 a { text-decoration: none; }。

text-decoration 虽简单，但合理使用能显著提升文本的可读性和交互体验，是前端美化的基础工具之一。

2. 文本属性进阶：text-transform 与 text-indent 详解

一、text-transform：文本大小写转换工具

text-transform 用于快速调整文本的大小写格式，适合简单的文本规范化处理，无需手动修改原始内容。

1. 常见取值及效果

取值	作用描述	示例（原始文本："my name is tom"）
`capitalize`	每个单词首字母大写（单词以空格分隔）	"My Name Is Tom"
`uppercase`	所有字符转为大写	"MY NAME IS TOM"
`lowercase`	所有字符转为小写	"my name is tom"（原始一致则无变化）
`none`	不改变大小写（默认值）	"my name is tom"

2. 应用场景与局限

适用场景：
- 快速统一格式（如将用户输入的姓名自动首字母大写）；
- 强调文本（如按钮文字用 uppercase 显示）。
```
.btn-text {
  text-transform: uppercase; /* 按钮文字全大写 */
}
```
局限性：
- 仅能按 “单词” 或 “全部” 转换，无法实现复杂逻辑（如仅大写姓氏）；
- 复杂需求需用 JavaScript（如 toUpperCase() 方法）。

二、text-indent：首行缩进的规范实现

text-indent 用于设置段落第一行的缩进，是传统排版（如书籍、文章）的常用属性，现代网页中需结合设计风格使用。

1. 核心用法与单位选择

作用：仅影响元素内第一行文本的左侧缩进量。
推荐单位：em（相对单位，适配字体大小）：
- 1em = 当前元素的 font-size 值（如 font-size: 16px 时，1em = 16px）；
- text-indent: 2em 表示首行缩进 “2 个当前字体大小的宽度”，恰好对应 2 个汉字宽度（推荐中文排版使用）。
```
.paragraph {
  font-size: 16px;
  text-indent: 2em; /* 16px × 2 = 32px，缩进2个汉字 */
}
```
不推荐固定像素（px）：若用 text-indent: 32px，当字体大小改为 20px 时，32px 不再等于 2 个汉字宽度（会出现偏差），而 2em 会自动适配（20px × 2 = 40px）。

2. 应用与注意事项

适用场景：传统博客、文章类网页（符合中文阅读习惯），如：

.article-content p {
  text-indent: 2em; /* 所有段落首行缩进2字符 */
  line-height: 1.8; /* 配合行高提升可读性 */
}

注意事项：
- 仅对块级元素生效（如 <p>、<div>），对行内元素（如 <span>）无效；
- 现代简约设计中较少使用（多通过段落间距 margin 区分段落）。

三、调试技巧：高效调整文本属性

利用 Chrome 开发者工具实时调试，提升开发效率：

右键元素→“检查”，打开 Elements 面板；
在 Styles 面板找到对应属性（如 text-indent）；
点击属性值，通过 鼠标滚轮上下滚动 微调数值（如从 2em 调整为 2.2em）；
满意后将最终值复制到代码中。

四、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
text-transform	控制大小写：capitalize（首字母大写）、uppercase（全大写）等	capitalize 仅单词首字母大写（非所有首字母）	⭐⭐
text-indent	首行缩进，推荐 2em（适配字体大小）	em 单位的动态适配性（vs 固定 px 的局限性）	⭐⭐⭐
调试技巧	开发者工具实时调整属性值	相对单位（em）在响应式布局中的优势	⭐⭐

开发建议

text-transform：仅用于简单场景（如按钮文字全大写），复杂需求（如仅大写姓氏）用 JavaScript 实现（如字符串切割后拼接）。
text-indent：中文文章类网页用 2em 保持传统排版，现代简约设计可省略（通过 margin-bottom 设置段落间距）。
单位选择：优先用相对单位（em），避免固定 px，确保在不同字体大小下显示一致。

掌握这两个属性，能更灵活地控制文本格式，兼顾规范性和设计需求。

3. 文本对齐（很重要）

一、文本对齐（text-align 属性）详解

1. text-align 的核心定义与作用

text-align 是 CSS 中控制行内内容水平对齐的核心属性，其作用对象并非仅局限于 “文本”，而是所有行内级元素（如文本、图片、span 等）。根据 MDN 定义：

text-align 用于设置行内内容（如文字、行内元素）相对于其块级父容器的水平对齐方式。

这意味着：

仅对块级元素设置有效（如 div、p、h1 等），行内元素设置无效；
影响的是容器内部的 “行内内容”，而非容器本身的位置（容器位置需用 margin 等属性控制）。

2. text-align 的常见取值与效果

取值	作用	适用场景	注意事项
left	行内内容向左对齐（默认值）	常规文本排版（如段落、列表）	大多数语言（如中文、英文）默认左对齐
right	行内内容向右对齐	表单右侧按钮、日期 / 金额显示	视觉上引导视线至右侧，适合强调尾部信息
center	行内内容居中对齐	标题、卡片标题、弹窗提示	常用于需要突出的内容，增强视觉焦点
justify	行内内容两端对齐	长文本段落（如新闻、文章）	需多行文本且配合`text-align-last: justify`生效，单行文本无效果

3. 应用实例与效果演示

以一个宽 500px、红色背景的 div 容器为例（内部包含文本和行内元素），演示不同取值的效果：

  这是一段示例文本

.container {
  width: 500px;
  background: red;
  padding: 10px;
  /* 切换以下属性查看效果 */
  /* text-align: left; */
  /* text-align: right; */
  /* text-align: center; */
  /* text-align: justify; */
}

left 效果：文本和蓝色块均靠容器左侧对齐（默认状态）；
right 效果：文本和蓝色块均靠容器右侧对齐；
center 效果：文本和蓝色块在容器内水平居中；
justify 效果：单行时无变化；若文本换行（如增加内容至多行），则每行左右两端均对齐（需配合text-align-last: justify确保最后一行也对齐）。

4. 易混淆点与常见误区

误区 1：认为text-align: center能让块级元素居中纠正：text-align仅控制 “内部行内内容”，若要让块级元素（如 div）自身居中，需用margin: 0 auto（设置水平外边距自动）。
误区 2：justify 取值 “无效” 纠正：单行文本无法触发两端对齐，需满足两个条件：
1. 文本内容足够长（自动换行成多行）；
2. 配合text-align-last: justify（控制最后一行对齐方式）。
误区 3：行内元素设置 text-align 生效纠正：text-align仅对块级父容器有效，行内元素（如 span）设置后无任何效果。

二、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
text-align 属性	控制块级容器内行内内容的水平对齐，取值包括 left/right/center/justify	1. 与`margin: 0 auto`的区别（内部内容对齐 vs 元素自身对齐） 2. justify 的生效条件	⭐⭐⭐⭐

关键结论： text-align 是 “容器对内部行内内容的对齐控制”，理解其作用对象（行内内容）和适用容器（块级元素），是避免错误使用的核心。实际开发中，center 用于标题居中，left 用于常规文本，justify 用于长段落排版，需根据场景灵活选择。

4. 文本对齐的深度解析

text-align 属性深度解析：不止于文本的对齐神器

一、text-align 的核心能力：行内内容的对齐控制器

text-align 最核心的作用是 “控制块级容器内所有行内级内容的水平对齐方式”，而非仅局限于 “文本”。这也是它能让图片、输入框等非文本元素居中的关键。

1. 基础用法：文本与行内元素的对齐

文本对齐：直接对块级容器（如<div>、<p>）设置，控制内部文本的左 / 中 / 右对齐：

.title {
  text-align: center; /* 标题文本居中 */
}
.content {
  text-align: left; /* 正文文本左对齐（默认） */
}

图片 / 行内元素对齐：对包含图片的块级容器设置，可让图片居中（无需额外样式）：
同理，输入框（<input>）、按钮（<button>）等行内级元素也能通过此方式居中。

二、关键原理：只对 “行内级内容” 生效

text-align 的作用范围有严格限制 ——仅影响 “行内级元素”（inline-level），对 “块级元素”（block-level）无效。这是最容易踩坑的点。

元素类型	特点（是否独占一行）	是否受 text-align 影响	举例
行内级元素	不独占一行	✅ 受影响	文本、`<img>`、`<input>`、`<span>`
块级元素	独占一行	❌ 不受影响	`<div>`、`<p>`、`<h1>`、`<ul>`

1. 块级元素如何 “响应” text-align？

若要让块级元素（如一个小<div>）在父容器中居中，需先将其转为行内级元素：

原理：display: inline-block 让块级元素失去 “独占一行” 特性，变为行内级元素，从而响应父容器的 text-align: center。

2. 块级元素居中的更优方案：margin

若不希望改变块级元素的显示类型（保持独占一行），可使用 margin: 0 auto 实现居中（这是块级元素专属方案）：

/* 块级元素自身居中（父容器需有宽度） */
.box {
  width: 300px; /* 必须设置宽度 */
  margin: 0 auto; /* 水平方向自动外边距，实现居中 */
}

居中方案	适用元素类型	核心原理
`text-align: center`	行内级元素	父容器控制内部行内内容对齐
`margin: 0 auto`	块级元素	元素自身通过自动外边距居中

三、常见问题与解决方案

“设置 text-align: center 后，块级元素没居中”：
- 原因：块级元素不受 text-align 影响；
- 解决：改用 margin: 0 auto（需设置元素宽度）。
“图片居中失效”：
- 原因：未对图片的块级父容器设置 text-align: center（直接对图片设置无效）；
- 解决：确保样式写在图片的父容器上（如<div>）。
“text-align 和 margin 的选择困惑”：
- 居中 “文本、图片、按钮” 等行内内容 → 用 text-align: center（写在父容器）；
- 居中 “div、p” 等块级元素 → 用 margin: 0 auto（写在元素自身）。

四、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
text-align 作用对象	控制块级容器内行内级内容的对齐（文本、图片等）	对块级元素无效（常见误区）	⭐⭐⭐
图片居中实现	对父容器设置 text-align: center	样式需写在父容器，而非图片本身	⭐⭐
块级元素居中方案	用 margin: 0 auto（需设置宽度）	与 text-align 的适用场景区别（行内内容 vs 块级元素）	⭐⭐⭐⭐

开发建议

明确元素类型：设置样式前先判断元素是 “行内级” 还是 “块级”（可通过 Chrome 开发者工具的 Computed 面板查看display属性）。
优先语义化：文本居中用text-align，块级元素居中用margin，避免为了居中强行修改元素类型（如没必要的display: inline-block）。
结合调试工具：若对齐失效，检查父容器是否为块级元素、样式是否正确应用（通过 Elements 面板的 Styles 标签确认）。

text-align 的强大之处在于 “一行代码搞定多种行内内容的对齐”，但理解其 “只作用于行内级内容” 的本质，才能避免 90% 的使用错误。

5. 文本两端对齐（text-align: justify）详解

文本两端对齐是 CSS 中通过text-align: justify实现的排版效果，常用于需要规整视觉呈现的场景（如新闻、文章等）。结合上述内容，可从实现方式、特性及注意事项三方面深入理解：

一、实现前提：基础设置与布局准备

使用text-align: justify前，需先完成基础布局配置，否则效果可能不明显：

设置容器宽度
- 需给父容器（如div）设置固定宽度（如width: 200px），否则块级元素默认占满一行，无 “剩余空间” 可分配，两端对齐无视觉效果。
- 示例：创建class="box"的div，设置width: 300px; background: red; color: white，内部放入多行长文本，便于观察对齐效果。
理解文本换行特性
- 文本会自动换行：当单个单词 / 字符无法完整放入行尾时，自动移至下一行。
- 换行后预留空间：未设置两端对齐时，行末会保留空白（英文因单词整体性更明显），justify会将这些空间 “平均分配” 到单词间隙。

二、两端对齐的核心特性

text-align: justify的效果有明确规则，需注意与其他对齐方式的区别：

对齐方式	核心特征	适用场景
`left`（默认）	文本左对齐，预留空间在右侧	日常文本、段落默认排版
`right`	文本右对齐，预留空间在左侧	日期、签名等需要右靠的内容
`center`	文本居中，预留空间左右均分	标题、短文本强调
`justify`	文本左右边缘完全对齐，剩余空间均分至单词间隙	长文本（如文章、新闻）规整排版

关键限制：

仅对多行文本生效，单行文本无 “剩余空间”，无法显示两端对齐效果。
默认不作用于最后一行：最后一行仍按left对齐（英文排版为主），避免强制拉伸导致单词间距过大、影响阅读。

三、特殊需求：控制最后一行对齐

若需强制最后一行也两端对齐（极少场景，如特定中文排版），可配合text-align-last属性：

text-align-last: justify：强制最后一行两端对齐。
text-align-last取值与text-align一致（left/right/center/justify），仅作用于最后一行。

注意：该属性实际应用频率低，尤其是中文排版中，最后一行强制两端对齐可能导致字符间距不均，反而影响可读性，建议优先遵循默认规则。

四、设计逻辑：为什么最后一行默认不两端对齐？

这一规则源于 “网页替代传统报纸排版” 的需求：

报纸 / 书籍中，宽幅页面若最后一行强制两端对齐，可能导致单词 / 字符间距过大（如短文本被拉伸至整行），破坏阅读连贯性。
保留最后一行自然排版（左对齐），可让视觉焦点集中于内容本身，提升阅读舒适度。

总结

text-align: justify的核心是 “分配行内剩余空间，使文本边缘规整”，但需满足两个条件：多行长文本+非最后一行。实际开发中，需结合内容类型（英文 / 中文）和阅读体验，合理选择是否使用，避免为了 “视觉规整” 牺牲可读性。

6. 字体属性（font-*）全解析：从基础到实战应用

一、字体属性与文本属性的核心区别

字体属性（font-*）：控制文字的 “自身特性”（如大小、粗细、字体类型），以 font- 为前缀（如 font-size、font-weight）。
文本属性（text-*）：控制文字的 “排版方式”（如对齐、装饰线、缩进），以 text- 为前缀（如 text-align、text-decoration）。

二、核心字体属性详解

1. font-size：控制字体大小（基础中的基础）

作用：决定文字的尺寸，直接影响可读性（过小看不清，过大占空间）。
默认值：浏览器默认 16px（可在浏览器设置中修改，但开发中以代码为准）。

单位与用法：

单位	说明（相对于…）	示例	推荐场景
`px`	固定像素（最直观）	`font-size: 14px`	绝大多数场景
`em`	父元素的 `font-size`（继承关系）	父元素 20px → 子元素 `2em`=40px	需动态适配父元素
百分比	父元素的 `font-size`（同 em）	父元素 20px → 子元素 `200%`=40px	与 em 类似，较少用

继承性：子元素会继承父元素的 font-size（如父元素 16px，子元素默认 16px）。
开发建议：优先用 px（直观且可控），避免滥用 em（易导致嵌套后尺寸混乱）。

2. font-family：设置字体系列（视觉风格的核心）

作用：指定文字使用的字体（如微软雅黑、Arial），决定文字的 “外观风格”。
基础语法：
```
.text {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
```
- 多个字体用逗号分隔，浏览器会从左到右查找系统中已安装的字体，找不到则用下一个。
- 包含空格的字体名需用引号包裹（如 "Microsoft YaHei"）。
常见字体：
- 中文字体：微软雅黑（"Microsoft YaHei"）、宋体（SimSun）。
- 英文字体：Arial、Helvetica（无衬线，适合屏幕阅读）；Times New Roman（有衬线，适合印刷）。
开发注意：
- 字体由设计师指定，开发者只需按设计稿复制字体名。
- 最后加 sans-serif（无衬线字体）作为 “保底”，确保在任何系统都有默认字体可用。

3. font-weight：控制字体粗细（强调与层次）

作用：设置文字的粗细程度，用于强调重要内容（如标题、按钮文字）。
常用取值：
取值说明对应数值示例场景
normal 正常粗细（默认） 400 正文文本
bold 加粗 700 标题、按钮文字
注意：
- 数值范围为 100-900（100 最细，900 最粗），但多数字体仅支持 400（normal）和 700（bold）。
- 不是所有字体都有 “多粗细版本”，若字体本身不支持加粗，设置 bold 可能无效。

取值	说明	对应数值	示例场景
`normal`	正常粗细（默认）	400	正文文本
`bold`	加粗	700	标题、按钮文字

4. line-height：行高（排版舒适度的关键）

作用：控制 “一行文字的高度”（包括文字本身高度 + 上下空白），影响多行文本的可读性。
核心理解：
- 行高 = 文字高度 + 上间距 + 下间距（上间距 = 下间距，因此文字垂直居中于行高）。
- 示例：font-size: 16px; line-height: 24px → 文字上下各有 4px 空白（(24-16)/2=4）。

用法：

.paragraph {
  font-size: 16px;
  line-height: 1.5; /* 推荐：1.5倍字体大小（16×1.5=24px） */
  /* 也可直接写数值：line-height: 24px; */
}

推荐用 “无单位倍数”（如 1.5），会自动基于当前 font-size 计算（适配不同字体大小）。

应用场景：
- 多行文本：line-height 设为 1.5-1.8 更易读（避免文字拥挤）。
- 单行文本垂直居中：让 line-height 等于容器高度（如 height: 40px; line-height: 40px）。

5. font：字体属性缩写（简化代码）

作用：将多个字体属性合并为一行（需按固定顺序），减少代码量。

语法：

/* 顺序：font-style font-variant font-weight font-size/line-height font-family */
.title {
  font: bold 20px/1.2 "Microsoft YaHei", sans-serif;
  /* 等价于：
    font-weight: bold;
    font-size: 20px;
    line-height: 1.2;
    font-family: "Microsoft YaHei", sans-serif;
  */
}

必须包含：font-size 和 font-family（否则缩写无效）。
注意：适合简单场景，复杂样式建议分开写（避免顺序错误导致样式失效）。

三、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
font-size	字体大小，默认 16px，支持 px/em/ 百分比	em 单位的继承性（子元素基于父元素计算）	⭐⭐
font-family	字体系列，多个字体用逗号分隔（从左到右查找）	带空格的字体名需用引号包裹；保底字体 sans-serif	⭐
font-weight	字体粗细，常用 normal (400) 和 bold (700)	数值与关键字的对应关系（700=bold）	⭐⭐
line-height	行高，推荐用无单位倍数（如 1.5）	单行文本垂直居中的原理（line-height = 容器高度）	⭐⭐⭐⭐
font 缩写	合并多个字体属性，必须包含 font-size 和 font-family	属性的固定顺序（错序则失效）	⭐⭐

开发建议

字体大小分层：建立清晰的层级（如标题 20px、副标题 18px、正文 14px），保持页面一致性。
行高适配场景：正文用 1.5 倍行高，标题用 1.2 倍（更紧凑）。
字体兼容性：中文字体加英文备用（如 "Microsoft YaHei", Arial），避免系统缺字体导致乱码。

掌握这些字体属性，能从 “文字本身” 和 “排版层次” 两方面提升页面质感，是前端视觉优化的基础。

6. font-family 属性：网页字体的选择与适配策略

一、font-family 的核心作用与机制

font-family 是控制网页文字字体的核心属性，决定了文字的 “视觉风格”（如微软雅黑的圆润、Arial 的简洁）。其核心机制是 “优先使用系统已安装的字体，找不到则依次 fallback 到备选字体”，确保在不同设备和操作系统上都能显示预期效果。

二、基础用法与语法规则

基本语法：
```
/* 单个字体 */
.text { font-family: "Microsoft YaHei"; }

/* 多个备选字体（推荐） */
.text { font-family: "Microsoft YaHei", Arial, sans-serif; }
```
- 多个字体用 逗号分隔，浏览器按顺序查找系统中已安装的字体。
- 包含空格的字体名需用引号包裹（如 "Microsoft YaHei"），单字体育字体可省略（如 Arial）。
字体查找逻辑：浏览器会先检查用户操作系统的字体库中是否有第一个字体（如 “微软雅黑”），若有则使用；若没有，自动查找第二个（如 “Arial”），以此类推。若所有字体都找不到，将使用浏览器默认字体（通常是宋体或 Times New Roman，不可控）。

三、继承性与全局配置

继承特性：font-family 具有继承性 —— 父元素设置后，所有子元素会自动继承该字体（无需重复设置）。例：给 <body> 标签设置字体，整个页面的文字都会继承：
```
body {
  font-family: "Microsoft YaHei", Arial, sans-serif;
}
```
此时，页面中的 <p>、<div>、<span> 等元素的文字都会使用上述字体。
全局配置最佳实践：网站的通用字体通常定义在单独的基础样式文件中（如 reset.css 或 base.css），通过 <link> 引入 HTML，实现全网站统一管理：
base.css 中集中配置字体，避免重复代码，便于后期修改。

四、多字体备选方案：兼容性的关键

设置多个备选字体是工业级开发的必备策略，目的是 “适配不同操作系统和设备”（如 Windows、macOS、Linux 的默认字体不同）。

常见组合示例：
```
/* 适配Windows和macOS的中文字体组合 */
font-family: "Microsoft YaHei", "PingFang SC", "Heiti SC", Arial, sans-serif;
```
- "Microsoft YaHei"：Windows 系统常用中文字体；
- "PingFang SC"：macOS 系统默认中文字体；
- "Heiti SC"：iOS 设备默认中文字体；
- Arial：英文字体备选（避免中文环境下英文显示异常）；
- sans-serif：无衬线字体 “保底”（所有系统都支持）。
为什么需要 “保底” 字体？ sans-serif（无衬线字体）是 CSS 定义的 “通用字体族”，不特指某一种字体，而是让浏览器自动选择系统中最合适的无衬线字体（确保在极端情况下也有基本可读的字体）。

五、大厂实践：淘宝 / 京东的字体设置参考

主流网站的字体配置经过长期优化，可直接参考其思路：

淘宝的字体设置：

body {
  font-family: "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
}
/* 单独覆盖按钮、输入框等元素的默认字体 */
button, input {
  font-family: inherit; /* 继承body字体，避免浏览器默认样式干扰 */
}

原因：部分元素（如 <button>、<input>）浏览器会设置默认字体，需用 inherit 强制继承全局字体。

京东的渐进优化：优先使用 “微软雅黑”，同时添加多个备选字体（如 "Microsoft YaHei", "WenQuanYi Micro Hei", Arial, sans-serif），适配更多国产操作系统（如 Linux 的 “文泉驿微米黑”）。

六、扩展：网络字体（@font-face）

若需要使用特殊字体（如品牌定制字体），可通过 @font-face 加载网络字体，确保所有设备显示一致：

/* 定义网络字体 */
@font-face {
  font-family: "MyBrandFont";
  src: url("./fonts/mybrandfont.woff2") format("woff2"),
       url("./fonts/mybrandfont.woff") format("woff");
}

/* 使用网络字体 */
.logo {
  font-family: "MyBrandFont", sans-serif;
}

注意：网络字体会增加页面加载时间，需选择轻量格式（如 woff2），并设置备选字体。

七、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
font-family 基础用法	设置字体名称，多个字体用逗号分隔（按顺序查找）	带空格的字体需用引号包裹；sans-serif 作为保底	⭐⭐
继承性与全局配置	父元素设置后子元素继承，建议在 body 中全局配置	特殊元素（button/input）需显式继承	⭐⭐
多字体备选策略	适配不同系统（Windows/macOS）的字体组合	浏览器会使用第一个可用字体，而非所有字体混合	⭐⭐⭐
网络字体 @font-face	加载网络字体实现特殊字体一致显示	需考虑加载性能和格式兼容性	⭐⭐⭐⭐

开发建议

参考大厂配置：直接复用淘宝、京东的字体组合（已适配多数场景），避免重复踩坑。
全局统一设置：在 body 中定义基础字体，特殊元素通过 inherit 继承，减少代码冗余。
慎用特殊字体：非必要不使用网络字体（影响加载速度），优先选择系统预装字体。

font-family 看似简单，却直接影响网页的 “第一观感” 和跨平台兼容性，合理配置能让页面在不同设备上都保持专业、统一的视觉效果。

7.font-family属性补充

一、`font-family` 补充说明

字体分类与后备机制 最后指定的sans-serif（无衬线）、serif（衬线）、monospace（等宽）是通用字体族，用于在所有指定字体都不可用时，让浏览器根据系统选择同类字体。例如：
```
font-family: "Microsoft YaHei", Arial, sans-serif;
```
若前两种字体都不可用，浏览器会选择系统默认的无衬线字体（如 Windows 的 “微软雅黑”、macOS 的 “苹方”）。
Unicode 编码字体的意义 示例中的\5B8B\4F53是 “宋体” 的 Unicode 编码（十进制22369和19971），用于兼容早期不支持中文的浏览器或系统，确保中文字体能被正确识别。
引号使用的细节
- 单单词字体名（如Arial、tahoma）可省略引号；
- 多单词字体名（如'Hiragino Sans GB'）或包含特殊字符（如空格、数字、符号）的字体名，必须加引号，否则浏览器可能解析错误；
- 推荐统一使用单引号或双引号，保持代码风格一致。

二、`font-weight` 补充说明

数值与关键字的对应关系
关键字对应数值效果描述
normal 400 正常粗细（默认值）
bold 700 粗体
lighter - 比父元素更细（相对值）
bolder - 比父元素更粗（相对值）
注意：100-300通常为 “细体”，500-600为 “中等粗细”，800-900为 “特粗”，但实际效果取决于字体文件是否支持（很多字体仅包含 400 和 700 两种粗细）。
浏览器兼容性问题 虽然规范允许 1-1000 的任意数值，但多数字体仅包含特定粗细的版本（如 400、700），非标准数值（如 150、550）可能被浏览器自动映射到最近的支持值，导致不同浏览器显示不一致，因此开发中优先使用整百数值（100-900）或关键字。
默认样式的覆盖 对于strong、b、h1-h6等默认加粗的标签，若需统一样式，可在 CSS 中显式重置：
```
strong, b, h1-h6 {
  font-weight: normal; /* 取消默认加粗 */
}
```

关键字	对应数值	效果描述
normal	400	正常粗细（默认值）
bold	700	粗体
lighter	-	比父元素更细（相对值）
bolder	-	比父元素更粗（相对值）

三、总结

font-family的核心是兼容性与后备机制，通过多字体列表和通用字体族确保跨系统显示一致；
font-weight的关键是理解数值与关键字的对应关系，优先使用常用值（400、700）避免兼容性问题；
实际开发中，参考淘宝、京东等大厂的字体设置方案（如统一在body设置基础字体，单独覆盖特殊元素），可减少兼容性问题。

这些知识点在前端布局中高频使用，尤其是字体兼容性处理，是页面美观和用户体验的基础～

8. font-style属性

一、字体样式总结

1. font-style：控制文本的倾斜样式

核心功能：决定文字是常规显示还是斜体显示，主要用于西文排版，中文场景下使用较少。
常用取值及特点：
- normal：默认值，文字常规显示，无倾斜效果。
  - 应用场景：重置继承的斜体样式（如取消<i>标签的默认斜体）。
- italic：使用字体自带的斜体设计（需字体本身包含斜体版本）。
  - 优势：斜体效果更自然，符合字体设计初衷（如部分艺术字体的斜体可能向左倾斜，而非统一向右）。
- oblique：通过算法强制文本倾斜（约 12 度），不依赖字体本身的斜体设计。
  - 特点：简单粗暴的倾斜处理，适合没有专门斜体版本的字体。

italic 与 oblique 的核心区别：

维度	italic	oblique
实现方式	调用字体预置的斜体字形	强制文本倾斜一定角度
依赖条件	需字体支持斜体设计	无需字体特殊支持
视觉效果	与字体设计风格一致（可能更精致）	仅角度倾斜，无字形优化
开发建议	优先使用，适合大多数场景	仅特殊设计需求时使用

2. font-variant：控制西文小写字母的显示形式

核心功能：主要影响英文小写字母的排版，中文几乎不适用。
常用取值：
- normal：默认值，字母常规显示（大写、小写按原样式展示）。
- small-caps：将小写字母转换为 “小型大写字母”。
  - 显示规则：原大写字母保持不变，小写字母变为缩小版的大写形式（高度与原小写字母一致）。
  - 示例："My Name" 会显示为 "MY NAME"（其中小写字母 y、a、m 变为小型大写）。
应用场景：仅用于西文排版的艺术化设计（如杂志、海报标题），中文网站中极少使用，了解即可。

二、知识重点与实践建议

知识点	考试重点 / 易混淆点	难度	实践建议
font-style 取值区别	normal（默认）、italic（字体斜体）、oblique（强制倾斜）	⭐⭐	优先使用 italic，斜体需求优先依赖字体自身设计
italic 与 oblique 差异	实现原理不同（预置斜体 vs 强制倾斜）	⭐⭐⭐	多数场景下效果接近，无需过度纠结
font-variant 作用	small-caps 的 “小型大写” 特性	⭐	了解即可，中文场景几乎不用
历史标签替代	淘汰`<i>`等语义化不足的斜体标签	⭐	用 CSS 的 font-style 实现样式，而非标签本身

通过掌握font-style的常用取值和区别，即可满足大多数开发需求；font-variant作为冷门属性，只需知晓其功能即可。

9. 行高（line-height）：从基础到垂直居中的核心逻辑

一、行高的本质：控制文本行间距的 “隐形尺子”

行高（line-height）是 CSS 中最核心的文本布局属性之一，其本质是 “两行文字基线之间的垂直距离”，直接决定了文本行之间的间距和可读性。

1. 核心概念：基线与四线格

理解行高需先掌握文本的 “四线格” 体系（以英文为例）：

基线（baseline）：小写字母x的下边缘对齐线（行高的计算基准）；
顶线（top）：文本的最高点（如字母b的顶部）；
底线（bottom）：文本的最低点（如字母p的底部）；
中线（middle）：顶线与基线的中间线（约为小写字母x的中间）。

行高的严格定义：相邻两行文本的基线之间的垂直距离（如line-height: 30px表示两行基线间距为 30px）。

2. 行高与文本高度的关系

行高 = 文本自身高度（顶线到底线） + 行距（上一行底线到下一行顶线的距离）。

文本自身高度 ≈ font-size（如font-size: 24px时，文本高度约 24px）；
行距 = 行高 - 文本高度（会平均分配到文本上下，使文本垂直居中于行高范围内）。

示例： font-size: 24px; line-height: 40px

行距 = 40px - 24px = 16px → 文本上下各分配 8px（文本在 40px 高的空间内居中）。

二、行高（line-height）与高度（height）的核心区别

属性	作用范围	核心功能	应用场景
`line-height`	每行文本	控制单行文本的垂直占据空间	调整行间距、单行文本垂直居中
`height`	整个元素容器	定义元素的整体高度	控制元素的整体尺寸（如固定高度的盒子）

关键差异：

多行文本中，line-height决定每行的高度，元素总高度由 “行高 × 行数” 自动撑开（除非设置height强制固定）；
若height < 行高 × 行数，文本会溢出容器（需配合overflow处理）。

三、行高的核心应用：单行文本垂直居中

这是行高最常用的场景，实现原理简单但需严格遵循条件：

1. 实现条件：

元素内只有单行文本；
给元素设置line-height = height（行高等于容器高度）。

2. 代码示例：

.box {
  width: 200px;
  height: 100px; /* 容器高度 */
  line-height: 100px; /* 行高 = 容器高度 */
  background: red;
  color: white;
}

单行文本垂直居中

3. 原理：

文本默认在line-height范围内垂直居中，当line-height等于容器height时，文本自然在容器内垂直居中。

四、行高的实战技巧与注意事项

行高的取值方式：
- 推荐使用无单位倍数（如line-height: 1.5），会基于当前font-size自动计算（适配不同字体大小）；
- 避免使用px（固定值，字体大小变化时需同步修改）。
可读性行高建议：
- 正文文本：line-height: 1.6-1.8（避免过密，提升阅读舒适度）；
- 标题文本：line-height: 1.2-1.4（更紧凑，突出层级）；
- 移动端：适当增大行高（如 1.8），补偿触控操作的视觉需求。
继承性与坑点：
- 行高具有继承性，子元素会继承父元素的行高值（而非计算后的值）；
- 例：父元素font-size: 20px; line-height: 2（实际行高 40px），子元素font-size: 16px会继承line-height: 2（实际行高 32px，而非 40px），这是响应式设计的理想效果。

五、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
行高定义	两行基线之间的距离，包含顶线、底线等参考线	基线的概念（小写字母 x 的下边缘）	⭐⭐⭐⭐
行高与文本居中	单行文本垂直居中：line-height = height	仅适用于单行文本，多行文本不适用	⭐⭐⭐
行高与 height 区别	行高控制单行高度，height 控制元素整体高度	多行文本时，元素高度由行高 × 行数决定	⭐⭐⭐
行高取值建议	优先使用无单位倍数（如 1.5）	无单位值会基于子元素 font-size 自动计算	⭐⭐

开发建议

单行文本居中：无脑用line-height = height（最简单直接的方案）。
多行文本间距：用line-height: 1.6（平衡可读性和紧凑度）。
复杂元素居中：单行文本用行高，多行或块级元素推荐用 Flex 布局（display: flex; align-items: center），避免传统position+transform的复杂计算。

行高是文本布局的 “隐形骨架”，理解其与基线、字体大小的关系，能让你在处理文本排版时更游刃有余。

10. 字体缩写属性（font）：简化代码的核心规则与实战应用

一、font 缩写属性的本质与组成

font 是 CSS 中最强大的复合属性之一，可一次性设置 6 个字体相关属性，核心作用是 “简化代码，减少冗余”。其包含的子属性及顺序规则如下：

组成结构： font: [font-style] [font-variant] [font-weight] font-size[/line-height] font-family

可选属性：font-style（样式）、font-variant（变体）、font-weight（粗细）—— 可省略或任意调换顺序。
必需属性：font-size（字体大小）、font-family（字体系列）—— 必须存在且顺序固定（font-size在前，font-family在后）。
特殊项：line-height（行高）—— 必须紧跟在font-size后，用斜杠/分隔（如12px/1.5），可省略。

二、核心语法规则（必掌握）

1. 可选属性：顺序自由，可省略

font-style、font-variant、font-weight 这三个属性的顺序可任意调换，且均可省略（不影响语法有效性）。

示例：

/* 以下写法等价，效果相同 */
.font1 { font: italic small-caps bold 16px sans-serif; }
.font2 { font: bold italic small-caps 16px sans-serif; }
.font3 { font: 16px sans-serif; } /* 省略所有可选属性，合法 */

实际应用：通常只设置其中 1-2 个（如仅加粗：font: bold 16px sans-serif），极少全部使用。

2. 行高（line-height）：位置固定，可省略

line-height 必须紧跟在font-size后，用斜杠分隔，格式为 font-size/line-height。

示例：

/* 行高为字体大小的1.5倍（推荐） */
.font { font: 14px/1.5 "Microsoft YaHei", sans-serif; }

/* 行高为固定值30px */
.font { font: 14px/30px "Microsoft YaHei", sans-serif; }

/* 省略行高（使用默认行高） */
.font { font: 14px "Microsoft YaHei", sans-serif; }

京东案例解析：
京东代码中
```
font: 12px/1.5 ...
```
表示：
- 字体大小 12px；
- 行高为 12px 的 1.5 倍（即 18px），适配正文阅读的舒适度。

3. 必需属性：顺序固定，不可省略

font-size 和 font-family 是font缩写的 “骨架”，必须存在且顺序严格固定（font-size在前，font-family在后）。

错误示例（浏览器会忽略整个样式）：

/* 错误：font-family在前，font-size在后 */
.font { font: "Microsoft YaHei" 14px; }

/* 错误：缺少font-family */
.font { font: 14px; }

正确示例：

/* 最简单的合法写法 */
.font { font: 14px sans-serif; }

三、实战应用与最佳实践

常用简写组合：实际开发中，最常用的是 “字体大小 + 行高 + 字体系列” 的组合，兼顾简洁与实用性：

/* 正文样式：14px大小，1.5倍行高，微软雅黑字体 */
body {
  font: 14px/1.5 "Microsoft YaHei", Arial, sans-serif;
}

/* 标题样式：20px大小，加粗，1.2倍行高 */
h1 {
  font: bold 20px/1.2 "Microsoft YaHei", sans-serif;
}

大厂参考：淘宝、京东等网站的全局字体设置均采用简写形式，例如：
```
/* 淘宝字体设置 */
body {
  font: 12px/1.5 tahoma, arial, 'Hiragino Sans GB', '\5B8B\4F53', sans-serif;
}
```
仅保留必要属性，通过多字体备选确保兼容性，同时用倍数行高适配不同场景。
避坑指南：
- 不要为了简写而强行包含所有属性（如无需斜体时，省略font-style）；
- 行高用无单位倍数（如 1.5）而非固定 px，适配字体大小变化；
- 多字体名称时，注意引号规则（如包含空格的字体需加引号）。

四、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
font 缩写组成	包含 6 个子属性，必需项为 font-size 和 font-family	可选属性（前 3 个）可任意排序，必需项顺序固定	⭐⭐⭐
行高在缩写中的位置	紧跟 font-size，用斜杠分隔（如 14px/1.5）	斜杠不可省略，顺序不可颠倒	⭐⭐
合法简写判断	必须包含 font-size 和 font-family	缺少必需项会导致整个样式失效	⭐⭐
实战写法	优先使用 “大小 / 行高字体” 的简洁组合	参考大厂代码（如京东 12px/1.5）	⭐⭐

开发建议

优先简写：全局字体设置（如body）用font缩写，减少代码量；
灵活省略：无需的属性（如font-variant）直接省略，避免冗余；
文档查询：忘记语法时，在 MDN 搜索 “CSS font”，查看官方语法示例（[ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ]）。

掌握font缩写，能显著提升 CSS 编写效率，同时保持代码的整洁性 —— 这也是大厂代码的共性特点。

11. 选择器

一、字体相关知识点回顾

在字体相关内容中，核心需掌握的知识点如下：

font-size：用于设置字体的大小，是字体样式中最基础的属性之一，直接影响文本的视觉大小。
font-family：指定元素内文本的字体系列，为了保证兼容性，通常会设置多个后备字体。
font-weight：控制字体的粗细，常见取值有 normal（正常）、bold（粗体）以及 100-900 的数值等。
line-height：设置文本的行高，当行高等于容器高度时，文本可实现垂直居中，其值可以是具体像素、无单位数值（相对于字体大小的倍数）等。
font 缩写属性：整合了 font-style、font-variant、font-weight、font-size、line-height 和 font-family，使用时需遵循特定的语法规则，其中 font-size 和 font-family 不可省略，line-height 需紧跟在 font-size 后用斜杠分隔，font-style、font-variant、font-weight 可任意排序且可省略。

其余两项字体相关内容仅作了解即可，无需深入掌握。

二、CSS 选择器详解

CSS 选择器的核心作用是精准定位 HTML 元素并为其添加样式，以下是重点内容：

1. 已学选择器

元素选择器：直接使用 HTML 元素名称作为选择器，会选中页面中所有该类型的元素，适用于对同一类型元素设置统一样式。例如：p { color: green; } 会将所有<p>标签的文字颜色设为绿色。
类选择器：以 . 加类名的形式表示，可选中所有带有该 class 属性的元素。类名命名规范多样，多个单词可通过中划线、下划线连接或使用驼峰命名法。例如：.title { font-size: 20px; } 会选中所有 class 为 “title” 的元素。
ID 选择器：以 # 加 ID 名的形式表示，用于选中具有特定 ID 的元素。需注意，一个 HTML 文档中 ID 值应唯一，且不宜使用标签名作为 ID 名。例如：#header { background: gray; } 会选中 ID 为 “header” 的元素。

2. 需掌握的新选择器

伪类选择器：hover：这是最常用的伪类选择器，用于选中鼠标悬停时的元素并设置样式。例如：a:hover { color: red; } 表示当鼠标悬停在链接上时，链接文字颜色变为红色。
伪元素选择器：::before 和 ::after 是高频使用的伪元素选择器，后续会详细讲解其具体使用场景，它们主要用于在元素内容的前后插入内容。

3. 通用选择器

语法：使用 * 表示，可匹配页面中所有的 HTML 元素。
特性与注意事项：
- 典型用途是进行全局样式重置，比如清除所有元素的内外边距：* { margin: 0; padding: 0; }。
- 性能较低，因为浏览器会遍历所有元素（包括未使用的标签），可能影响页面加载速度。
- 开发建议：优先使用并集选择器（如 div, p, span { ... }）替代通用选择器，以减少不必要的性能损耗。

4. 例题解析：设置全局字体大小

问题场景：需为页面所有元素统一设置字体大小。
传统方法：逐一定义元素选择器，如 div { font-size: 30px; } p { font-size: 30px; } 等，这种方法繁琐且不高效。
优化方案：
- 使用并集选择器：div, p, h1, h2 { font-size: 30px; }，明确指定需要设置样式的元素，避免对无关元素造成影响。
- 避免直接使用通用选择器 * { font-size: 30px; }，因其会影响性能。
补充说明：部分 HTML 标签（如 body）自带默认的外边距，可能会干扰页面布局，需通过显式设置（如 body { margin: 0; }）来消除这种干扰。

总结

选择器是 CSS 中定位元素的关键，掌握元素选择器、类选择器、ID 选择器、hover 伪类选择器以及了解通用选择器的特性和使用场景，能帮助我们更高效地编写 CSS 样式。在实际开发中，应根据具体需求选择合适的选择器，同时注意代码的性能和规范性。

12. 选择器的进阶应用

1. 复合选择器

复合选择器是由多个简单选择器组合而成的选择器，用于更精确地选中目标元素。

交集选择器：由两个选择器直接连接而成，选中同时满足两个选择器条件的元素。
- 语法：元素选择器.类选择器 或 元素选择器#id选择器
- 示例：p.box 会选中所有 class 为 box 的 p 元素；div#content 会选中 id 为 content 的 div 元素。
- 注意：如果第一个选择器是元素选择器，后面的选择器可以是类选择器或 id 选择器；如果第一个选择器是类选择器或 id 选择器，后面也可以跟其他选择器，但实际开发中较少这样使用。
并集选择器：将多个选择器用逗号分隔，选中所有符合其中任意一个选择器条件的元素。
- 语法：选择器1, 选择器2, 选择器3...
- 示例：h1, h2, .title 会选中所有 h1 元素、h2 元素以及 class 为 title 的元素。
- 应用场景：当多个不同的元素或选择器需要设置相同的样式时，使用并集选择器可以简化代码。

2. 关系选择器

关系选择器用于根据元素之间的关系来选择元素，主要包括后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器。

后代选择器：选择某个元素的所有后代元素（包括直接后代和间接后代）。
- 语法：祖先选择器后代选择器（两个选择器之间用空格分隔）
- 示例：ul li 会选中 ul 元素下的所有 li 元素，无论 li 元素是 ul 的直接子元素还是嵌套在其他元素中的后代元素。
子选择器：仅选择某个元素的直接子元素。
- 语法：父选择器 > 子选择器（两个选择器之间用大于号分隔）
- 示例：ul > li 只会选中 ul 元素的直接子元素 li，而不会选中嵌套在 li 里面的 li 元素。
相邻兄弟选择器：选择某个元素后面紧跟的第一个兄弟元素。
- 语法：元素选择器 + 相邻兄弟选择器（两个选择器之间用加号分隔）
- 示例：h2 + p 会选中 h2 元素后面紧跟的第一个 p 元素。
通用兄弟选择器：选择某个元素后面的所有兄弟元素（不包括自身）。
- 语法：元素选择器 ~ 兄弟选择器（两个选择器之间用波浪号分隔）
- 示例：h2 ~ p 会选中 h2 元素后面的所有 p 兄弟元素。

3. 伪类选择器

伪类选择器用于选择元素的特定状态或位置，其语法是在选择器后面加上:伪类名。

动态伪类：根据用户的交互行为来选择元素。
- :link：选择未被访问过的链接。
- :visited：选择已被访问过的链接。
- :hover：选择鼠标悬停在上面的元素。
- :active：选择被激活（如点击时）的元素。
- 注意：这四个伪类的顺序有要求，通常按照:link、:visited、:hover、:active的顺序书写，以确保样式能正确生效。
结构伪类：根据元素在文档中的结构位置来选择元素。
- :first-child：选择父元素的第一个子元素。
- :last-child：选择父元素的最后一个子元素。
- :nth-child(n)：选择父元素的第 n 个子元素（n 可以是数字、关键字 even（偶数）、odd（奇数）或公式如 2n+1）。
- :first-of-type：选择父元素中同类型元素的第一个。
- :last-of-type：选择父元素中同类型元素的最后一个。
- :nth-of-type(n)：选择父元素中同类型元素的第 n 个。
其他伪类：
- :focus：选择获得焦点的元素（如输入框）。
- :empty：选择没有子元素（包括文本节点）的元素。
- :checked：选择被选中的表单元素（如单选按钮、复选框）。

4. 伪元素选择器

伪元素选择器用于创建一些不在文档树中的虚拟元素，并对其设置样式，语法是在选择器后面加上::伪元素名。

::before：在元素内容的前面插入一个虚拟元素。
::after：在元素内容的后面插入一个虚拟元素。
注意：::before和::after必须配合content属性使用，content可以设置为文本、空字符串等。
示例：p::before { content: "★"; color: red; } 会在每个 p 元素内容前添加一个红色的五角星。
::first-letter：选择元素内容的第一个字母。
::first-line：选择元素内容的第一行。

四、知识小结

知识点	核心内容	考试重点 / 易混淆点	难度系数
复合选择器	交集选择器和并集选择器的语法及应用	交集与并集选择器的区别	⭐⭐⭐
关系选择器	后代、子、相邻兄弟、通用兄弟选择器的区别	后代与子选择器的范围差异	⭐⭐⭐⭐
伪类选择器	动态伪类的顺序、结构伪类的使用	nth-child 与 nth-of-type 的区别	⭐⭐⭐⭐
伪元素选择器	before、after 等伪元素的用法及 content 属性	伪元素与伪类的语法区别（单冒号与双冒号）

posted @ 2025-07-29 22:36 yfceshi 阅读(16) 评论(0) 收藏举报

刷新页面返回顶部