Zen Coding学习笔记

一直很喜欢Emmet（ZenCoding）这种快速编码方式。今天整理一下，语法部分。

官方地址：http://docs.emmet.io/cheat-sheet/

语法

 

下级：>  

例：nav>ul>li

同级：+

例：div+p+bq

向上：^

例：div>p>span+en^bq

<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

分组：()

例：div>(header>ul>li*2)+p

重复：*

例：ul>li*5

顺序：$

例：ul>li.item$*2 从1到2 。

　　$$$*2 固定三位数。

　　$@-*5 倒序。

　　$@3*5 从3到5

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
</ul>

Id：#

例：#hea。id="hea"

类：.

例：.title 。 class="title"

自定义属性：[]

例：p[title="Hello world"]。<p title="Hello world"></p>

内容文本：{}

例：a{Click me}。<a href="">Click me</a>

隐式属性：自动套用标签

例：.class。<div class="class"></div>

　　em>.class。<em><span class="class"></span></em>

　　ul>.class。<ul> <li class="class"></li> </ul>

　　table>.row>.col。<table> <tr class="row"> <td class="col"></td> </tr> </table>