快速参考
以下是支持的特性:
| ele | creates an HTML element tag 展开一个HTML元素标签 |
| # | creates an id attribute 作用于元素标签，展开一个id属性 |
| . | creates a class attribute 作用于元素标签，展开一个类属性，一个标签可以跟多个类属性，最终展开会一起呗加入class属性中 |
| [] | creates a custom attribute 作用于元素标签，展开一个HTML元素标签的属性，可以是任意非标准属性名称，写法同CSS选择器。 |
| > | creates a child element 作用于元素标签或组，紧跟展开一个子元素标签或组，参考CSS选择器 |
| + | creates a sibling element 作用于元素标签或组，紧跟展开一个兄弟元素标签或组，参考CSS选择器 |
| ^ | climbs up 作用于元素标签或组，紧跟的元素标签或组爬升到上一个层级 |
| * | is element multiplication. This creates the same thing n number of times 作用于元素标签或组，展开重复次数，后面跟一个数字。 |
| $ | is replaced with an incremental number 配合*使用，代表拷贝的序号 |
| $$ | is used for numbers with padding 序号占位，用0填充 |
| {} | creates text in an element 展开为文本 |
| () | as a group 将标签组作为一组，可嵌套。 |
ID和类属性:#and.
<!-- Type this -->
div#contentRegion.address<!-- Creates this -->
<div id="contentRegion" class="address"></div>
自定义属性:[]
<!-- Type this -->
div[title]<!-- Creates this -->
<div title=""></div>
也可以包含属性值
<!-- Type this -->
input[placeholder="Name" type="text"]<!-- Creates this -->
<input type="text" value="" placeholder="Name" />
子组:>
<!-- Type this -->
div#menu>span.item[title]<!-- Creates this -->
<div id="menu">
<span class="item" title=""></span>
</div>
兄弟组:+
<!-- Type this -->
footer>div>a+input<!-- Creates this -->
<footer>
<div>
<a href=""></a>
<input type value="" />
</div>
</footer>
爬升:^
<!-- Type this -->
footer>div>a+input^p<!-- Creates this -->
<footer>
<div>
<a href=""></a>
<input type value="" />
</div>
<p></p>
</footer>
重复次数:*
<!-- Type this -->
ul>li*4>span<!-- Creates this -->
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
重复序号:$
<!-- Type this -->
section>article.item$$*4<!-- Creates this -->
<section>
<article class="item01"></article>
<article class="item02"></article>
<article class="item03"></article>
<article class="item04"></article>
</section>
文本:{}
<!-- Type this -->
ul>li*4>span{Caption $$}<!-- Creates this -->
<ul>
<li><span>Caption 01</span></li>
<li><span>Caption 02</span></li>
<li><span>Caption 03</span></li>
<li><span>Caption 04</span></li>
</ul>
组:()
<!-- Type this -->
((a+span)+(a>span))*3<!-- Creates this -->
<a href=""></a>
<span></span>
<span><a href=""></a></span>
<a href=""></a>
<span></span>
<span><a href=""></a></span>
<a href=""></a>
<span></span>
<span><a href=""></a></span>
Emmet/Zen Coding 快速入门说明,布布扣,bubuko.com