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>