emmet 的 * 操作符本质是同级重复而非嵌套,仅当配合 > 或 + 时才产生层级关系;支持 $ 索引变量实现序号变化;需注意作用域、环境识别及括号分组。

Emmet 的 * 操作符本质是「重复生成」,不是「嵌套」
很多人误以为 * 是用来写循环的,其实它只是告诉 Emmet:把前面的结构复制 N 份,并排放在同一层级。比如 div*3 会生成三个并列的 <div></div>,而不是一个 <div> 里面套三个子 <code><div>。
<p>关键判断点:只要没用 <code>> 或 + 显式指定父子或兄弟关系,* 就只做同级重复。
-
li*5→ 5 个同级<li> -
span.item*4→ 4 个同级带 class 的<span class="item"></span> -
div*2>p*3→ 先生成两个同级<div>,每个里面再嵌套三个 <code><p></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></script>标签内直接写div*3—— Emmet 不会解析 script 块里的 HTML 缩写
和
+、>混用时,优先级和分组容易出错*的作用范围由空格和括号决定。没加括号时,它只绑定紧邻左侧的最简单元;加了括号才能控制作用域。-
div*2+p*3→ 两个<div> + 三个 <code><p></p>(共 5 个同级元素) -
(div+p)*2→ 两组「div 后跟一个 p」,即<div></div> <p></p> <div></div> <p></p> -
ul>li*3→ 一个<ul></ul>里含三个<li>(*在>右侧,所以作用于li) - 易错:
div.class*2有效,但div.class *2(中间有空格)会被解析为div.class和单独的*2,后者无效
括号是唯一能明确划清
*作用边界的手段,复杂结构务必加括号,不然生成结果常和预期差一层嵌套。 -











