zen coding 初探

<!-- 1 子节点 操作符 > -->
<!-- div>ul> li -->
<div>
<ul>
<li></ li>
</ul>
</div>
<!-- 2 兄弟节点 操作符 + -->
<!-- div+p+div -->
<div></ div>
<p></ p>
<div></ div>
<!-- 3 父节点 操作符 ^ （英文输入法下，Shift+6） -->
<!-- div+div> ul>li ^p
-->
<div></ div>
<div>
<ul>
<li></ li>
</ul>
<p></ p>
</div>
<!-- 4 多个相同兄弟节点 操作符 * -->
<!-- div>ul> li*3^p*2
-->
<div>
<ul>
<li></ li>
<li></ li>
<li></ li>
</ul>
<p></ p>
<p></ p>
</div>
<!-- 5 分组 操作符 () -->
<!-- div>ul> li*3^^+div >ol>li*2^button
-->
<div>
<ul>
<li></ li>
<li></ li>
<li></ li>
</ul>
</div>
<div>
<ol>
<li></ li>
<li></ li>
</ol>
<button></ button>
</div>
<!-- (div>ul> li*3)+(div >ol>li*2^button)
-->
<div >
<ul>
<li></ li>
<li></ li>
<li></ li>
</ul>
</div >
<div >
<ol>
<li></ li>
<li></ li>
</ol>
<button></ button>
</div >
<!-- 6 ID 和 CLASS 操作符 # 和 . -->
<!-- (div#divTop>ul.ulFirst>li*3)+( div#divSecond>ol.olFirst>li*3)
-->
<div id= "divTop">
<ul class= "ulFirst">
<li></ li>
<li></ li>
<li></ li>
</ul>
</div>
<div id= "divSecond">
<ol class= "olFirst">
<li></ li>
<li></ li>
<li></ li>
</ol>
</div>
<!-- 7 自定义属性操作符 [] -->
<!-- (div#nav >ul>li>img[user_data="my_face"])+(div.main>p)+(div.submitDiv.foot>form)^script
-->
<div id= "nav">
<ul>
<li>< img src ="" alt="" user_data="my_face" /></li >
</ul>
</div>
<div class= "main">
<p></ p>
</div>
<div class= "submitDiv
foot">
<form action= ""></form >
</div>
<script></ script>
<!-- 8 计数器 $ -->
<!-- div#loop_show>ul>li.img_$*5
-->
<div id= "loop_show">
<ul>
<li class= "img_1"></li >
<li class= "img_2"></li >
<li class= "img_3"></li >
<li class= "img_4"></li >
<li class= "img_5"></li >
</ul>
</div>
<!-- div#loop_show>ul>li.img_$$*5
-->
<div id= "loop_show">
<ul>
<li class= "img_01"></li >
<li class= "img_02"></li >
<li class= "img_03"></li >
<li class= "img_04"></li >
<li class= "img_05"></li >
</ul>
</div>
<!-- 9 文本内容 操作符 {} -->
<!-- div#loop_show>ol>li.img_${轮番图片$}*5 -->
<div id= "loop_show">
<ol>
<li class= "img_1">轮番图片1 </li>
<li class= "img_2">轮番图片2 </li>
<li class= "img_3">轮番图片3 </li>
<li class= "img_4">轮番图片4 </li>
<li class= "img_5">轮番图片5 </li>
</ol>
</div>
<!-- ul>li.item$@-*5 倒序-->
<ul>
<li class= "item5"></li >
<li class= "item4"></li >
<li class= "item3"></li >
<li class= "item2"></li >
<li class= "item1"></li >
</ul>
<!-- ul>li.item$@3*5 从指定数开始-->
<ul>
<li class= "item3"></li >
<li class= "item4"></li >
<li class= "item5"></li >
<li class= "item6"></li >
<li class= "item7"></li >
</ul>
<!-- 10 关于空格 ,如果有空格，也需要使用""（双引号）进行包括 -->
div#divSpace> p.sp