Zen Coding的常用方法
目前 Zen Coding 已经更名为 Emmet。
zen-Coding的使用需要掌握CSS和HTML相关知识。其实只要对CSS的选择器比较熟悉，就可以得用简短的类似于CSS选择器的代码高效的编写出HTML代码。
1.E | E#name | E.name
这里E表示元素，如p,div等。#name和.name分别表示id和class属性。例：
div
1 | <div></div> |
div#main
1 | <div id="main"></div> |
ul.item
1 | <li class="item"></li> |
如要显示一个id和多个class属性时，可以这样写
ul#nav.one.two
2.E>E | E#name>E#name | E.#name>E.name | E.name>E.name
>表示父级嵌套子级。例：
div>span
1 | <div><span></span></div> |
div#nav>ul.main
1 2 3 | <div id="nav"> <ul class="main"></ul> </div> |
3.E+E | E#name+E#name | E.#name+E.name | E.name+E.name
+号表示兄弟关系。例：
p+p
1 2 | <p></p> <p></p> |
div#header+div#content+div#footer
1 2 3 | <div id="header"></div> <div id="content"></div> <div id="footer"></div> |
E+ (+号表示会生成默认的子元素)
table+
1 2 3 4 5 | <table> <tr> <td></td> </tr> </table> |
ul+
1 2 3 | <ul> <li></li> </ul> |
dl+
1 2 3 4 | <dl> <dt></dt> <dd></dd> </dl> |
4.E*N
N:表示某个元素需要重复的次数。例：
p*3
1 2 3 | <p></p> <p></p> <p></p> |
ul#nav>li.item*4
1 2 3 4 5 6 | <ul id="nav"> <li class="item"></li> <li class="item"></li> <li class="item"></li> <li class="item"></li> </ul> |
5.E*N$
$:表示序号。例：
ul#nav>li.item-$*4
1 2 3 4 5 6 | <ul id="nav"> <li class="item-1"></li> <li class="item-2"></li> <li class="item-3"></li> <li class="item-4"></li> </ul> |
6.E[attr]
attr:表示元素属性。例:
a[title]
1 | <a href="" title=""></a> |
td[colspan=2]
1 | <td colspan="2"></td> |
7.E|filter
E|e
|e输出转义字符
div#wrap>div.content>p|e
1 2 3 4 5 | <div id="wrap"> <div class="content"> <p></p> </div> </div> |
完全卸载SQLServer的方法 Sublime Text2 的使用方法和插件推荐
