嵌套、属性、乘法、编号、文本操作符

嵌套操作符

引用自知乎
> (子元素)
div>ul>li
表现为：

<div>
    <ul>
        <li></li>
    </ul>
</div>

+ （兄弟元素）
div+p+bq
表现为：

<div></div>
<p></p>
<blockquote></blockquote>

^ 返回上层

• 使用 ^ 运算符，您可以爬上树的一个层次，并更改上下文
  div+div>p>span+em^bq
  表现为：

  <div></div>
  <div>
      <p><span></span><em></em></p>
      <blockquote></blockquote>
  </div>
  // 此时的上下文返回到两个div所在的这一层了

• 当然了，^ 也可以多个并用，有几个 ^ 就返回几层
  div+div>p>span+em^^bq
  表现为：

  <div></div>
  <div>
      <p><span></span><em></em></p>
  </div>
  <blockquote></blockquote>
  // 此时上下文已经返回到最外层了

  ** * 乘法**
  使用 * 操作符，您可以定义应该输出多少次该元素，跟我们加减乘除里的乘法含义相近

ul>li*5

表现为：

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

属性操作符(Attribute operators)

ID 和 Class
Emmet使用类似于CSS选择器的语法给元素添加属性

div#header+div.page+div#footer.class1.class2.class3
表现为：

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

$编号(Item numbering)
操作符可以生成重复元素，而 $ 可以去元素进行编号。需要将 $ 放在元素名、属性名或者属性值里

ul>li.item$*5
表现为：

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>

如果想实现00x的格式，该怎么办呢？

可以连写多个$就可以生成带有前导的编号了

ul>li.item$$$*5
表现为：

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Text: {}文本
可以使用大括号 {}为元素添加文本，就类似于模板的插入符

div{hello world}
表现为：

<div>hello world</div>