ARTICLE DETAIL

资讯详情

深耕网站建设、视觉设计与SEO优化的一线实战洞察。

vscode 常用 Emmet Abbreviation 快捷方式

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>
  1. 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>
  1. .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>
  1. .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>
  1. div+p:生成 兄弟元素
<div></div>
<p></p>
  1. div>p:生成 父子元素
<div><p></p>
</div>
  1. .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>
返回列表