Emmet学习笔记

语法

主属性：:

input:hidden

<input type="hidden">

子节点：>

div>ul>li

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

下一个兄弟节点：+

div+p+input

<div></div><p></p><input type="text">

返回上一级：^

几个^代表向上返回几级

div+div>p>span+em^input

<div></div>

<div>

    <p><span></span><em></em></p>

    <input type="text">

</div>

多个：*

ul>li*2

<ul>

    <li></li>

    <li></li>

</ul>

分组改变优先级用小括号：()

div>(header>ul>li*2)+footer>p

<div>

    <header>

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

    </header>

    <footer>

        <p></p>

    </footer>

</div>

id和多class属性

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>

自定义属性

td[title="Hello world!" colspan=3]

<td title="Hello world!" colspan="3"></td>

自增数字，多个$代表多位数字

ul>li.item$$$*3

<ul>

    <li class="item001"></li>

    <li class="item002"></li>

    <li class="item003"></li>

</ul>

自增数字，改变初始数字和正序倒序

ul>li.item$@-3*3

<ul>

    <li class="item5"><li>

    <li class="item4"></li>

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

</ul>

配对标签内容

a{hello world}

<a href="">hello world</a>