emmet-前端开发神器的几种写法

*常用：类: . ，id: #

div.a+div#a

<div class="a"></div>

<div id="a"></div>

1.使用 > 生成元素子节点

div>ul>li

<div>

    <ul>

        <li></li>

    </ul>

</div>

2.使用 + 生成元素兄弟节点
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.元素编号$

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.更灵活的编号方式@

ul>li.item$@-*3

<ul>

    <li class="item3"></li>

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

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

</ul>

在 $ 后面添加 @N 可以改变编号基数

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>

这篇记录不错
https://www.cnblogs.com/summit7ca/p/6944215.html