emmet syntax

子代操作符(Child) >

div>div>p

兄弟操作符(Sibling) +

div>div+p

返回上级操作符(Climb-up) ^

div>div+p^div

分组操作符(Grouping) ()

(header>h1+div>p)+(main>h2+div>p)+(footer>p+div)

乘法操作符(Multiplication) *

ul>li*5

属性操作符(Attribute Operators)

1. id 和 class # .

与CSS的id、class选择器相似。

div#container>ul.items>li.item*3
#container>ul.items>li.item*3 // div可以省略

2. 指定属性(Custom attribute) []

除了 id、class的其他属性定义。

a[herf="#" target="_blank"].link
a.link[herf="#" target="_blank"]

数值计算操作符(Item numbering) $

ul>li.item_$*3

1. 设置前导零 $…

ul>li.item_$$*10

2. 指定起始数字 @n

ul>li.item_$@2*3

3. 倒序 @-

ul>li.item_$@-*3

文本操作符(Text) {}

div>p{deep dark fantasy.}+p{That's good.}