前端开发神器：Emmet

标签：style   blog   http   io   ar   strong   2014   div   sp   

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的神器，让你飞一般地编写HTML和CSS代码。

官网：http://docs.emet.io/

1. > 表示 后代

ul>li>a

<ul>
	<li><a href=""></a></li>
</ul>

div>h2+p

<div>
	<h2></h2>
	<p></p>
</div>

div#nav

<div id="nav"></div>

div.nav

<div class="nav"></div>

div>p>span^a

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

ul>li*5

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

div>a[title="hello world"]*3

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

div>a[title="hello world"]{Hello World}*3

<div>
	<a href="" title="hello world">Hello World</a>
	<a href="" title="hello world">Hello World</a>
	<a href="" title="hello world">Hello World</a>
</div>

div>(ul>li>a)*5+p{Hello World}

<div>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<ul>
		<li><a href=""></a></li>
	</ul>
	<p>Hello World</p>
</div>

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>

ul>li.item$@3*3

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

ul>li.item$@-*3

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

前端开发神器：Emmet

标签：style   blog   http   io   ar   strong   2014   div   sp   

原文地址：http://blog.csdn.net/wozaixiaoximen/article/details/39433271