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