View Single Post
  #1   IP: 112.87.85.95
Old 2016-11-05, 10:47 PM
Mackinac Mackinac is offline
初级会员
 
Join Date: 2013-04-26
Posts: 2
Mackinac 现在声名狼藉
Default Zen Coding: 一种快速编写HTML/CSS代码的方法

支持的属性和操作符的列表:
E
元素名称(div, p);
E#id
使用id的元素(div#content, p#intro, span#error);
E.class
使用类的元素(div.header, p.error.critial). 你也可以联合使用class和idID: div#content.column.width;
E>N
子代元素(div>p, div#footer>p>span);
E+N
兄弟元素(h1+p, div#header+div#content+div#footer);
E*N
元素倍增(ul#nav>li*5>a);
E$*N
条目编号 (ul#nav>li.item-$*5);


如:div#content>h1+p
Code:
<div id="content">  
<h1></h1>  
<p></p>  
</div>
生成5个<li>元素,你可以简单的写位li*5

如果你想写4个<li>元素,每个里面都有一个<a>标签,你就可以简单的写为li*4>a
Code:
<li><a href=""></a></li>  
<li><a href=""></a></li>  
<li><a href=""></a></li>  
<li><a href=""></a></li>
假设你想生成class为item1、item2和item3的3个<div>元素。你可以写成这样的缩写,div.item$*3:
Code:
<div class="item1"></div>  
<div class="item2"></div>  
<div class="item3"></div>
只需在你想要索引出现的任何class或id属性上添加一个美元符号即可,而且想要多少都可以。


div#i$-test.class$$$*5
会被转换成为:
Code:
<div id="i1-test" class="class111"></div>  
<div id="i2-test" class="class222"></div>  
<div id="i3-test" class="class333"></div>  
<div id="i4-test" class="class444"></div>  
<div id="i5-test" class="class555"></div>

Last edited by Mackinac : 2016-11-05 at 10:51 PM
Reply With Quote