vscode 常用 Emmet Abbreviation 快捷方式

本文主要是介绍vscode 常用 Emmet Abbreviation 快捷方式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

输入快捷指令后， 按“tab”键或者回车键 即可

1. .box*5：生成 5 个 class 为 box 的 div 元素

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

2. p.box*5：生成 5 个 class 为 box 的 p 元素

<p class="box"></p>
<p class="box"></p>
<p class="box"></p>
<p class="box"></p>
<p class="box"></p>

3. .box$*5：生成 5 个 class 为 box 自增长索引 的 div 元素

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>

4. .box{$}*5：生成 5 个 class 为 box 的 div 元素，内容自增长

<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>

5. div+p：生成 兄弟元素

<div></div>
<p></p>

6. div>p：生成 父子元素

<div><p></p>
</div>

7. .wrap>.box.box${$}*5：综合练习

<div class="wrap">
<div class="box box1">1</div><div class="box box2">2</div><div class="box box3">3</div><div class="box box4">4</div><div class="box box5">5</div>
</div>

这篇关于vscode 常用 Emmet Abbreviation 快捷方式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---