Emmet语法总结

Emmet语法总结

1.后代关系 >

例：
	nav>ul>li
等价于：
	<nav>
       <ul><li></li></ul>
	</nav>

2.兄弟关系 +

例：
	div+p
等价于：
	<div></div>
	<p></p>
div和p是同级

3.上级关系 ^

例：
	div+div>p>span+em^p
等价于：
    <div></div>
    <div>
   		<p>
        	<span></span>
       		<em></em>
   		</p>
        <p></p>
    </div>
p在em之后一级，即跳出了包含em的p
例：
	div+div>p>span+em^^div
等价于:
	<div></div>
	<div>
		<p>
       		 <span></span>
        	 <em></em>
   		</p>
	</div>
	<div></div>
div在em之后两级，即跳出了p，跳出了div

4.分组 （）

例：
	div>(header>ul>li*2>a)+footer>p
	<div>
		<header>
			<ul>
				<li><a href=""></a></li>
				<li><a href=""></a></li>
			</ul>
		</header>
		<footer>
			<p></p>
		</footer>
	</div>
圈地保级，保证后面的兄弟标签和括号内的同级
例：
	(div>dl>(dt+dd)*3)+footer>p
等价于：
	<div>
		<dl>
			<dt></dt>
			<dd></dd>
			<dt></dt>
			<dd></dd>
			<dt></dt>
			<dd></dd>
		</dl>
	</div>
	<footer>
		<p></p>
	</footer>

5.乘法 *

例：
	ul>li*4
等价于：
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>

6.自增符号 $

例1：
	ul>li.item$*5
等价于：
	<ul>
		<li class="item1"></li>
		<li class="item2"></li>
		<li class="item3"></li>
		<li class="item4"></li>
		<li class="item5"></li>
	</ul>
.等价于class属性
例2：
	h$[title="item"]{Header$}*3
等价于：
	<h1 title="item">Header1</h1>
	<h2 title="item">Header2</h2>
	<h3 title="item">Header3</h3>
例3：
	ul>li.item$$$*5
等价于：
	<ul>
		<li class="item001"></li>
		<li class="item002"></li>
		<li class="item003"></li>
		<li class="item004"></li>
		<li class="item005"></li>
	</ul>
例4：
	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>
@-实现倒序
例5：
	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>
序号从3开始排序

7.ID和类属性

ID属性

例：
	#header
等价于：
	<div id="header"></div>

类(class)属性 .

例： 
	.title
等价于：
	<div class="title"></div>

类连写

例：
	p.class1.class2.class3
等价于:
	<p class="class1 class2 class3"></p>

ID和类属性混合

例：
	div#content.wide
等价于：
	<div id="content" class="wide"></div>

8.自定义属性

例1：
	img[src="../images/logo.png"][alt="xxxx"]or img[src="../images/logo.png" alt="xxxx"]
等价于：
	<img src="../images/logo.png" alt="xxxx">

9.文本 {}

例1：
	a{xmlt}
等价于：
	<a href="">xmlt</a>
例2：
	p>{x}+a{ml}+{t}
等价于：
	<p>x<a href="">ml</a>t</p>

10.总结

快速生成HTML标签