Emmet 常用语法总结

Emmet语法汇总

层级结构

同级

ul+li

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

li*3

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

父子级

ul>li

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

(ul>li)+(ol>li)

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

ul>li^ol+li (这里的^可以无限加,每一个^代表抵消一个>,^之后的元素都和上个父级等级相同,所以ol后面的li也回到了上级)

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

Elements tag

div.box div.box1.box2

<div class="box"></div>
<div class="box1 box2"></div>

div#box

<div id="box"></div>

div#box1.box2

<div id="box1" class="box2"></div>

Elements text与Elements attribute

h1{内容}

<h1>内容</h1>

a[style=font-size:14px;width:10px] //同时设置多个样式,每个样式间用";"隔开

<a href="" style="font-size:14px;width:10px"></a>

a[style=font-size:14px;width:10px class=className] //设置样式的同时设置其他属性,其他属性用空格隔开

<a href="" style="font-size:14px;width:10px" class="className"></a> 

a:link

<a href="http://"></a>

input:button 这里的button可以更换其他type

<input type="button" value="">

元素自增

ul>li.item$*3 // $和*搭配使用,下标从1开始

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

隐式标签

.test #test

<div class="test"></div>
<div id="test"></div>

这里比较推荐只记住div的隐式用法

ul>.test

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

li：用于 ul 和 ol 中
tr：用于 table、tbody、thead 和 tfoot 中
td：用于 tr 中