Zen Coding的常用方法

2013年8月31日 MK Window 0 阅读 3283次

目前 Zen Coding 已经更名为 Emmet。
zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。
1.E | E#name | E.name
这里E表示元素，如p,div等。#name和.name分别表示id和class属性。例：
div

div#main

ul.item

如要显示一个id和多个class属性时，可以这样写
ul#nav.one.two

2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name
>表示父级嵌套子级。例：
div>span

div#nav>ul.main

3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name
+号表示兄弟关系。例：
p+p

div#header+div#content+div#footer

E+ (+号表示会生成默认的子元素)
table+

ul+

dl+

4.E*N
N:表示某个元素需要重复的次数。例：
p*3

ul#nav>li.item*4

5.E*N$
$:表示序号。例：
ul#nav>li.item-$*4

6.E[attr]
attr:表示元素属性。例:
a[title]

td[colspan=2]

7.E|filter
E|e
|e输出转义字符
div#wrap>div.content>p|e

<div id="wrap"> 
<div class="content"> 
<p></p> 
</div> 
</div>

css, emmet, html, zencoding, 代码, 方法

完全卸载SQLServer的方法 Sublime Text2 的使用方法和插件推荐