浅学Emmet语法

>

表示一种父子嵌套关系

div>ul>li

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

+

表示处于同一层级

div+div+div

<div></div>
<div></div>
<div></div>

^

一个表示向上提升一个层级,N个表示向上提升N个层级

div>div>div^div

<div>
    <div>
        <div></div>
    </div>
    <div></div>
</div>

div>div>div^^div

<div>
    <div>
        <div></div>
    </div>
</div>
<div></div>

*

表示输出几次

div*5

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

()

将子树进行分组

div>(div>p>span*2>a)+div>p

<div>
    <div>
        <p><span><a href=""></a></span><span><a href=""></a></span></p>
    </div>
    <div>
        <p></p>
    </div>
</div>

(div>div>(dt+dd)*3>a)+div>p

<div>
    <div>
        <dt></dt>
        <dd></dd>
        <a href=""></a>
        <dt></dt>
        <dd></dd>
        <a href=""></a>
        <dt></dt>
        <dd></dd>
        <a href=""></a>
    </div>
</div>
<div>
    <p></p>
</div>

# .

可以使用css的选择器语法,比如: id(#),class(.),element

#header+.page+#footer.cass1.csaa2.calss3

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="cass1 csaa2 calss3"></div>

自定义属性

1. 可以在方括号中使用任意数量的属性

td[title="hello" colspan=3 aa bb cc]

<td title="hello" colspan="3" aa="" bb="" cc=""></td>

2. 可以不指定属性值

td[aa bb cc]

<td aa="" bb="" cc=""></td>

3. 可以使用单引号或双引号来引用属性值

td[aa='20' bb="30"]

<td aa="20" bb="30"></td>

4. 如果值不包含空格，则不需要加引号

td[aa=10 bb=30 cc=50]

<td aa="10" bb="30" cc="50"></td>

$

用来计数

ul>li#li$*5

<ul>
    <li id="li1"></li>
    <li id="li2"></li>
    <li id="li3"></li>
    <li id="li4"></li>
    <li id="li5"></li>
</ul>

ul>li#li$$*10

<ul>
    <li id="li01"></li>
    <li id="li02"></li>
    <li id="li03"></li>
    <li id="li04"></li>
    <li id="li05"></li>
    <li id="li06"></li>
    <li id="li07"></li>
    <li id="li08"></li>
    <li id="li09"></li>
    <li id="li10"></li>
</ul>

@

改变编号的方向(升序或降序)和基数(起始值),必须放在$的后面

ul>li.item$@-*5

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

ul>li.item$@3*5

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

ul>li.item$@-3*5

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

{}

为元素添加文本

 div{文本}

<div>文本</div>

a{click}+b{here}

<a href="">click</a><b>here</b>

a>{click}+b{here}

<a href="">click<b>here</b></a>

隐式标签

通过父上下文隐式生成标签

.a>.b

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

em>.info

<em><span class="info"></span></em>

 ul>.item*3

<ul>
    <li class="item"></li>
    <li class="item"></li>
    <li class="item"></li>
</ul>

table>#id>[colspan]

<table>
	<tr id="id">
	    <td colspan=""></td>
	</tr>
</table>

lorem

生成虚拟文本

// 默认生成30个单词
lorem
// 生成100个单词
lorem100
// 生成1000个单词
lorem1000

p*4>lorem5

<p>Lorem ipsum dolor sit amet.</p>
<p>Maxime nisi odio rem ipsum?</p>
<p>Dolorum adipisci corrupti placeat! Odio.</p>
<p>Nihil, incidunt aliquam! Dignissimos, dolores.</p>

ul>lorem5.item*4

<ul>
    <li>Lorem ipsum dolor sit amet.</li>
    <li>Repudiandae ratione possimus error numquam?</li>
    <li>Nulla mollitia ad nam minus?</li>
    <li>Maiores dolor alias amet doloremque?</li>
</ul>