<p>Emmet 的 * 操作符本质是同级重复而非嵌套，仅当配合 > 或 + 时才产生层级关系；支持 $ 索引变量实现序号变化；需注意作用域、环境识别及括号分组。</p>
Emmet 的 * 操作符本质是「重复生成」，不是「嵌套」
很多人误以为 * 是用来写循环的，其实它只是告诉 Emmet：把前面的结构复制 N 份，并排放在同一层级。比如 div*3 会生成三个并列的 <div></div>，而不是一个 <div> 里面套三个子 <div>。
关键判断点：只要没用 > 或 + 显式指定父子或兄弟关系，* 就只做同级重复。
-
li*5→ 5 个同级<li> -
span.item*4→ 4 个同级带 class 的<span class="item"></span> -
div*2>p*3→ 先生成两个同级<div>，每个里面再嵌套三个<p>（这里*分两层作用）
带属性和文本内容时，* 仍保持同级，但内容需显式控制
如果想让每个重复元素有不同文本或属性值，不能靠 * 自动递增——Emmet 默认不会给 div*3 加 id="1"、id="2" 这类变化。它只会原样复制。
要实现带序号的内容，得用 Emmet 的变量语法：$ 表示当前索引（从 1 开始），$$ 表示两位数补零。
立即学习“前端免费学习笔记（深入）”；
-
div.item$*3→<div class="item1"></div><div class="item2"></div><div class="item3"></div> -
li{Item $}*4→ 四个<li>Item 1</li>到<li>Item 4</li> - 错误写法：
div*3{id: "a"}{text}—— 属性和文本会被每项重复，但不会自动变化
常见失效场景：缩写被解析为 CSS 选择器而非 HTML 结构
在某些编辑器（如 VS Code 的非 HTML 文件类型、或未启用 Emmet 的 .txt 中），输入 div*3 可能只显示为普通文本，不触发展开。这不是语法错，是环境没识别为 HTML 上下文。
- 确保文件后缀是
.html或.htm，或手动设置编辑器语言模式为HTML - VS Code 中按
Ctrl+Shift+P输入 “Change Language Mode”，选HTML - Sublime Text 需确认右下角状态栏显示 “HTML”，否则可能按
Tab无反应 - 别在
<script>标签内直接写div*3—— Emmet 不会解析 script 块里的 HTML 缩写
和 +、> 混用时，优先级和分组容易出错
* 的作用范围由空格和括号决定。没加括号时，它只绑定紧邻左侧的最简单元；加了括号才能控制作用域。
-
div*2+p*3→ 两个<div>+ 三个<p>（共 5 个同级元素） -
(div+p)*2→ 两组「div 后跟一个 p」，即<div></div><p></p><div></div><p></p> -
ul>li*3→ 一个<ul>里含三个<li>（*在>右侧，所以作用于li） - 易错：
div.class*2有效，但div.class *2（中间有空格）会被解析为div.class和单独的*2，后者无效
括号是唯一能明确划清 * 作用边界的手段，复杂结构务必加括号，不然生成结果常和预期差一层嵌套。
