emmet 的 操作符仅作同级重复展开，不支持循环逻辑；div3 未展开常因文件后缀非 html 或语言模式错误；div.item$3 生成自增类名，而 div.item3 类名相同；括号是唯一可控的 * 作用范围边界。
Emmet 的 * 操作符不是循环语法，它只做同级重复展开——理解这点，才能避免生成结构错乱、序号不递增、属性全一样等常见问题。
为什么 div*3 没展开成三个 div？
最常见原因是编辑器没识别为 HTML 上下文：
- 文件后缀不是
.html或.htm，VS Code 会默认当纯文本处理 - 语言模式被误设为
Plain Text或JavaScript：按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（macOS），输入 “Change Language Mode”，选HTML - 在
<script></script>或<style></style>块内输入缩写——Emmet 默认不解析这些区域内的 HTML 缩写 - 某些插件冲突或 Emmet 被禁用：检查 VS Code 设置中
emmet.enable是否为true
div.item$*3 和 div.item*3 有什么区别？
前者生成带自增类名的三个同级元素，后者生成三个完全相同的元素：
-
div.item*3→<div class="item"></div> <div class="item"></div> <div class="item"></div> -
div.item$*3→<div class="item1"></div> <div class="item2"></div> <div class="item3"></div> - 想让文本也带序号，必须显式用
{Item $}：li{Item $}*4生成<li>Item 1</li>...<li>Item 4</li> - 错误写法：
div*3{id="a"}{text}—— 每个div都会有id="a"和相同text，不会自动变成id="1"、id="2"
嵌套重复时 * 的作用范围怎么判断？
* 只绑定紧邻左侧的最小语法单元，括号才是唯一可控边界：
-
div*2>p*3：先重复两个div，每个里面再嵌套三个p（共 2 组 × 3 个p） -
(div+p)*2：重复两组「div后跟一个p」，即<div></div> <p></p> <div></div> <p></p> -
ul>li*3：*作用于li，生成一个ul包含三个li - 空格会中断绑定：
div.class *2（中间有空格）→ 解析为div.class+ 单独的*2（无效）
真正容易被忽略的是括号的强制分组能力——复杂结构里不加括号，* 就按词法最左原则绑定，结果常和直觉相反。写完缩写后，不妨先在编辑器里试展开一次，看 DOM 层级是否符合预期，比反复调试更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
