Emmet 速查表 | Cheat Sheet

本文根据 Devhints / Emmet 翻译。代码示例及版本范围沿用原文。原文标注更新日期：2020-07-03。

Emmet 是一种标记语言，用于将 CSS 规则展开为 HTML

子节点：>

nav>ul>li

展开为

<nav>
  <ul>
    <li></li>
  </ul>
</nav>

同级节点：+

section>p+p+p

展开为

<section>
  <p></p>
  <p></p>
  <p></p>
</section>

向上移动：^

section>header>h1^footer

展开为

<section>
  <header>
    <h1></h1>
  </header>
  <footer></footer>
</section>

分组：()

section>(header>nav>ul>li)+footer>p

展开为

<section>
  <header>
    <nav>
      <ul>
        <li></li>
      </ul>
    </nav>
  </header>
  <footer>
    <p></p>
  </footer>
</section>

乘法（重复）：*

ul>li*3

展开为

<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

ID 和类名：.

ul.menu>li.menu__item+li#id_item+li.menu__item#id_2

展开为

<ul class="menu">
  <li class="menu__item"></li>
  <li id="id_item"></li>
  <li class="menu__item" id="id_2"></li>
</ul>

编号：$

ul>li.item$*3
ul>li.item$$*3
ul>li.item$@-*3
ul>li.item$@3*5

展开为

<ul>
  <li class="item1"></li>
  <li class="item2"></li>
  <li class="item3"></li>
</ul>
<ul>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
</ul>
<ul>
  <li class="item3"></li>
  <li class="item2"></li>
  <li class="item1"></li>
</ul>
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
</ul>
<ul>
  <li class="item3"></li>
  <li class="item4"></li>
  <li class="item5"></li>
  <li class="item6"></li>
  <li class="item7"></li>
</ul>

属性：[]

input[type="text"]
div[data-attr="test"]

展开为

<input type="text" />
<div data-attr="test"></div>

文本：{}

p{Lorem ipsum}

展开为

<p>Lorem ipsum</p>

隐式标签

.default-block
em>.default-inline
ul>.default-list
table>.default-table-row>.default-table-column

展开为

<div class="default-block"></div>
<em><span class="default-inline"></span></em>
<ul>
  <li class="default-list"></li>
</ul>
<table>
  <tr class="default-table-row">
    <td class="default-table-column"></td>
  </tr>
</table>