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 中