emmet语法简记

1. >

div>ul>li
<!--转换后-->
<div>
 <ul>
  <li></li>
 </ul>
</div>

2. +

div+p+h1
<!--转换后-->
<div></div>
<p></p>
<h1></h1>

3. ^

div>p>span^p>span
<!--转换后-->
<div>
 <p><span></span></p>
 <p><span></span></p>
<div>

4. #

div#box>div#content
<!--转换后-->
<div id="box">
 <div id="content"></div>
</div>

5. .

div.box>div.content
<!--转换后-->
<div class="box">
 <div class="content"></div>
</div>

6. []

注意：[]中的=后的值尽量以‘’或“”包围，如a[href='https://www.xxx.com']，否则转换会出问题

div[class='box' name='name' value=0 style='color:yellow']
<!--转换后-->
<div class="box" name="name" value="0" style="color:yellow"></div>

7. {}

div{内容}或者div>{内容}       
<!--转换后-->
<div>内容</div>
//div>{内容}这种少用，会出问题，例如div>{内容}+div>{内容} 转换后是<div>内容<div>内容</div></div>

8. *

div*2>span*3
<!--转换后-->
<div><span></span><span></span><span></span></div>
<div><span></span><span></span><span></span></div>

9. $

span*3{这是第$个span}
<!--转换后-->
<span>这是第1个span</span>
<span>这是第2个span</span>
<span>这是第3个span</span>

span*3(这是第$$$个span)
<!--转换后-->
<span>这是第001个span</span>
<span>这是第002个span</span>
<span>这是第003个span</span>

10. @

$@-

span*3{this is $@-}
<!--转换后-->
<span>this is 3</span>
<span>this is 2</span>
<span>this is 1</span>

$@N  N表示正整数

span*3{this is $@5}
<!--转换为-->
<span>this is 5</span>
<span>this is 6</span>
<span>this is 7</span>

$@-N N表示正整数

span*3{this is $@-5}
<!--转换为-->
<span>this is 7</span>
<span>this is 6</span>
<span>this is 5</span>

11. ()

div#el.container>header>h1{this is header}^content>ul>li*5>a[href='https://www.xxx.com']{this is $@-}^^^footer>h1{this is footer}
和
div#el.container>(header>h1{this is header})+(content>ul>li*5>a[href='https://www.xxx.com']{this is $@-})+footer>h1{this is footer}
的转换后的结构一样