*Common: class: . , id: #
div.a+div#a
<div class="a"></div>
<div id="a"></div>
1. Use > to generate element child nodes
div>ul>li
<div>
<ul>
<li></li> </ul> </div>
2. Use + to generate element sibling nodes
div+p+bq
<div></div>
<p></p>
<blockquote></blockquote>
3.操作符 ^ 的作用和 >
刚好相反
p>span^bq
<p><span></span></p> <blockquote></blockquote>
4.
Multiplication: *
ul>li*3
<ul>
<li></li>
<li></li> <li></li> </ul>
5.
Grouping: ()
div>(div>a)+footer
<div>
<div><a href=""></a></div>
<footer></footer>
</div>
6.自定义属性[attr]
div[data=1]
<div data="1"></div>
7. Element number $
ul>li.item$*3
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
</ul>
ul>li.item$$*3
<ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
</ul>
8. More flexible numbering method@
ul>li.item$@-*3
<ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul> Adding @N
after $ can change number base
ul>li.item$@2*4
<ul>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
ul>li.item$@-2*4
<ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
</ul>
9.文本操作符,Text:{} 给元素添加文本内容,在Emmet中是被当成单独的元素来解析的
a{Click me}
<a href="">Click me</a>
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b> <!-- a>{click}+b{here} --> <a href="">click<b>here</b></a>