qq_38449766
qq_38449766

中软实训 20190828 上午

Emmet语法

1 快捷代码
// ul#menu>li.item*8>a
<ul id="menu">
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
</ul>
2 属性留空
// div#
<div id=""></div>
// li.
<li class=""></li>
3 数列操作
//ul#menu>li.item$*8>a 自动递增
<ul class="menu">
    <li class="item1"><a href=""></a></li>
    <li class="item2"><a href=""></a></li>
    <li class="item3"><a href=""></a></li>
    <li class="item4"><a href=""></a></li>
    <li class="item5"><a href=""></a></li>
    <li class="item6"><a href=""></a></li>
    <li class="item7"><a href=""></a></li>
    <li class="item8"><a href=""></a></li>
</ul>

//ul#menu>li.item$@5*8 起始数字
<ul class="menu">
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
    <li class="item8"></li>
    <li class="item9"></li>
    <li class="item10"></li>
    <li class="item11"></li>
    <li class="item12"></li>
</ul>

//ul.menu>li.item$@-5*8 倒序
<ul class="menu">
    <li class="item5"><a href=""></a></li>
    <li class="item4"><a href=""></a></li>
    <li class="item3"><a href=""></a></li>
    <li class="item2"><a href=""></a></li>
    <li class="item1"><a href=""></a></li>
    <li class="item0"><a href=""></a></li>
    <li class="item-1"><a href=""></a></li>
    <li class="item-2"><a href=""></a></li>
</ul>

<!--a{link}>span{me}-->
<a href="">link<span>me</span></a>
4 缺省元素
//