这篇博客能帮助快速上手这款插件,极大地提高开发效率废话不多说直接上例子
zen codeing的缩写规则
E
元素名 (div, p);
实例:(输入完<按快捷键ctrl+E>就会显示)
输入:div
显示:<div></div>
E#id
带id的元素 (div#content, p#intro, span#error);
输入:div#wrap
显示:<div id="wrap"></div>
E.class
带class的元素 (div.header, p.error.critial). id 和 class 可以连写,如: div#content.column.width;
输入:div#content.column.width
显示:<div id="content" class="column width"></div>
E>N
子元素 (div>p, div#footer>p>span);
输入:ul>li>a>img
显示:
<ul>
<li><a href=""><img src="" alt="" /></a></li>
</ul>
E+N
兄弟元素 (h1+p, div#header+div#content+div#footer);
输入:div#wrap>div.header+div.main+div.footer
显示:
<div id="wrap">
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
</div>
E*N
多项元素 (ul#nav>li*5>a);
输入:ul>li*4>a>img
显示:
<ul>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
<li><a href=""><img src="" alt="" /></a></li>
</ul>
E$*N
带序号的元素 (ul#nav>li.item-$*5);
输入:ul>li.item-$*4>a>img
显示:
<ul>
<li class="item-1"><a href=""><img src="" alt="" /></a></li>
<li class="item-2"><a href=""><img src="" alt="" /></a></li>
<li class="item-3"><a href=""><img src="" alt="" /></a></li>
<li class="item-4"><a href=""><img src="" alt="" /></a></li>
</ul>
{}标签内容
输入:div#wrap>div.header{我是头部}+div.main{我是主体}+div.footer{我是尾部}
显示:
<div id="wrap">
<div class="header">我是头部</div>
<div class="main">我是主体</div>
<div class="footer">我是尾部</div>
</div>
[] 属性
输入:ul>li>a[href="#"][title="logo"]>img[src="imgs/logo.jpg"][alt="logo"]
显示如下:
<ul>
<li><a href="#" title="logo"><img src="imgs/logo.jpg" alt="logo" /> </a></li>
</ul>
()同级范围
输入:div>(div.header>ul>li+p)+(div.main>ul>li+p)+(div.footer>ul>li+p)
显示:
<div>
<div class="header">
<ul>
<li></li>
<p></p>
</ul>
</div>
<div class="main">
<ul>
<li></li>
<p></p>
</ul>
</div>
<div class="footer">
<ul>
<li></li>
<p></p>
</ul>
</div>
</div>